Как подключить шрифт в React
2 года назад·3 мин. на чтение
Рассмотрим три быстрых способах подключения шрифтов в React приложение.
font
В HTML используется для указания начертания, размера шрифта, типографики текста. Вы можете добавить шрифты в свое React приложение разными способами.
Способ 1. С использованием link
Мы можем ссылаться на любые шрифты из Интернета, с помощью тега <link>
внутри HTML-файла. Рассмотрим пример применения Google Fonts шрифта с помощью тега <link>
.
- Переходим в fonts.google.com
- Кликаем на шрифт
![Реакт добавить шрифт](https://it-dev-journal.ru/api/proxy/uploads/react_dobavit_shrift_1_bedf7cc887.jpg)
- Кликаем на “Select Regular 400” (или на любые другие выбранные виды, можно несколько)
![Реакт добавить шрифт](https://it-dev-journal.ru/api/proxy/uploads/react_dobavit_shrift_2_707482f743.jpg)
- Нажимаем на иконку “View selected families” сверху справа.
![Реакт добавить шрифт](https://it-dev-journal.ru/api/proxy/uploads/react_dobavit_shrift_3_2cfb8b941f.jpg)
- В появившемся боковом меню переходим в секцию “Use on the web” и копируем код, расположенный под
<link>
![Реакт добавить шрифт](https://it-dev-journal.ru/api/proxy/uploads/react_dobavit_shrift_4_43b273d58c.jpg)
- Переходим в
index.html
. Если ваше приложение создано с помощьюcreate-react-app
, тоindex.html
находится в папкеpublic
. Вставляем код, скопированный в п.5 внутрь<head>
.
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
- На сайте Google Fonts в том же боковом меню находим секцию “CSS rules to specify families” и копируем код.
![Реакт добавить шрифт](https://it-dev-journal.ru/api/proxy/uploads/react_dobavit_shrift_5_36b4e92cdf.jpg)
- Переходим в CSS файл и добавляем следующий стиль, вставляем скопированный код:
.font-roboto { font-family: 'Roboto', sans-serif; /* скопированный код */ }
- Применяем этот стиль в любом React компоненте
// App.jsx import './App.css'; function App() { return ( <div className="font-roboto"> <p>Hello</p> </div> ); } export default App;
Способ 2. С использованием Web Font Loader
Web Font Loader помогает загружать шрифты из Google Fonts, Typekit, Fonts.com и Fontdeck, а также самостоятельно размещенные веб-шрифты. Он разработан совместно компаниями Google и Typekit. Давайте посмотрим, как загрузить несколько шрифтов из Google Fonts и использовать их в компоненте React.- Установим
webfontloader
илиyarn add webfontloader
npm i webfontloader
- Импортируем
webloader
в компонент
import WebFont from 'webfontloader';
- Загружаем нужные шрифты, используя имя шрифта. Лучше использовать хук
useEffect
и позволить ему выполняться один раз при загрузке компонента. Поскольку шрифты должны быть загружены только один раз в приложении, вы можете загрузить их в файлеindex.js
.
Здесь мы загружаем шрифты 'Droid Sans' и 'Chilanka'.useEffect(() => { WebFont.load({ google: { families: ['Droid Sans', 'Chilanka'] } }); }, []);
- Теперь вы можете использовать эти шрифты в компоненте React с помощью атрибута
className
илиstyle
. Чтобы использовать атрибутclassName
, создайте CSS-класс в файле.css
.
Затем, в методе.font-loader { font-family: 'Chilanka'; }
render()
компонента добавьте следующее.
Или, с атрибутом<div className="font-loader"> Hello, World! </div>
style
<div style={{fontFamily: 'Droid Sans'}}> Hello, World! </div>
Способ 3. С использованием @font-face
Иногда шрифты должны быть загружены локально и упакованы в приложение.
@font-face
- это правило CSS для определения имени шрифта путем указания на него с помощью URL.
-
Создадим папку
fonts
в каталогеsrc
. -
Загрузим необходимые шрифты. В этом примере мы загрузим шрифт
Lobster
. Для этого выберем шрифт в Google Fonts, нажмем “Download family” и распакуем архив.
![Реакт добавить шрифт](https://it-dev-journal.ru/api/proxy/uploads/react_dobavit_shrift_6_8e0cbd0c03.jpg)
- Скопируем содержимое в папку
src\fonts
.
![Реакт добавить шрифт](https://it-dev-journal.ru/api/proxy/uploads/react_dobavit_shrift_7_80d588da4c.jpg)
- Затем импортируем шрифты в файл
index.js
.
import './fonts/Lobster/Lobster-Regular.ttf';
- В файл
index.css
добавим
@font-face { font-family: "LobsterRegular"; src: local("LobsterRegular"), url("./fonts/Lobster/Lobster-Regular.ttf") format("truetype"); font-weight: normal; }
- Теперь добавим имя класса в файл
App.css
, который использует этот шрифт.
.font-lobster { font-family: "LobsterRegular"; }
- Применяем этот стиль в любом React компоненте
// App.jsx import './App.css'; function App() { return ( <div className="font-lobster"> <p>Hello</p> </div> ); } export default App;
JavaScript в фигурных скобках в JSX в React компонентах
год назад·3 мин. на чтение
JSX позволяет вам писать HTML-подобную разметку внутри файла JavaScript, сохраняя логику рендеринга и содержимое в одном месте. Иногда вам может понадобиться добавить немного логики JavaScript или сослаться на динамическое свойство внутри этой разметки. В этой ситуации вы можете использовать фигурные скобки в JSX, чтобы добавить в них JavaScript.
Содержание туториала по React
JSX позволяет вам писать HTML-подобную разметку внутри файла JavaScript, сохраняя логику рендеринга и содержимое в одном месте. Иногда вам может понадобиться добавить немного логики JavaScript или сослаться на динамическое свойство внутри этой разметки. В этой ситуации вы можете использовать фигурные скобки в JSX, чтобы добавить в них JavaScript.
Передача строк в кавычках
Когда нужно передать строковый атрибут в JSX, нужно заключить его в одинарные или двойные кавычки:Здесьexport default function Avatar() { return ( <img className="avatar" src="http://example.com/userpic.jpg" alt="User Name" /> ); }
"http://example.com/userpic.jpg"
и "User Name"
передаются как строки.
Но что, если вы хотите динамически указать src
или alt
? Вы можете использовать JavaScript значение, заменив "
и "
на {
и }
:
Обратите внимание на разницу междуexport default function Avatar() { const avatar = 'http://example.com/userpic.jpg'; const description = 'User Name'; return <img className="avatar" src={avatar} alt={description} />; }
className="avatar"
, который указывает имя CSS класса "avatar"
, и src={avatar}
, который считывает значение переменной JavaScript с именем avatar
. Это потому, что фигурные скобки позволяют вам работать с JavaScript прямо в разметке.
Использование фигурных скобок: JavaScript в разметке
JSX — это особый способ написания JavaScript. Это означает, что внутри него можно использовать JavaScript — с помощью фигурных скобок{
}
. В приведенном ниже примере сначала объявляется имя, name
, а затем оно встраивается в фигурные скобки внутри <h1>
:
Любое выражение JavaScript будет работать между фигурными скобками, включая вызовы функций, таких какexport default function TodoList() { const name = 'User Name'; return <h1>{name}'s To Do List</h1>; }
formatDate()
:
const today = new Date(); function formatDate(date) { return new Intl.DateTimeFormat('en-US', { weekday: 'long' }).format(date); } export default function TodoList() { return <h1>To Do List for {formatDate(today)}</h1>; }
Где использовать фигурные скобки
Вы можете использовать фигурные скобки только двумя способами внутри JSX:- Как текст непосредственно внутри тега JSX:
<h1>{name}'s To Do List</h1>
работает, но<{tag}>To Do List</{tag}>
работать не будет. - Поскольку атрибуты следуют сразу после знака
=
:src={avatar}
будут считывать переменнуюavatar
, ноsrc="{avatar}"
передаст строку"{avatar}"
.
Использование двойных фигурных скобок: CSS и другие объекты в JSX
Помимо строк, чисел и других выражений JavaScript, вы даже можете передавать объекты в JSX. Объекты также обозначаются фигурными скобками, например{ name: "User Name", itemsCount: 10 }
. Следовательно, чтобы передать объект JS в JSX, вы должны заключить объект в другую пару фигурных скобок: person={{ name: "User Name", itemsCount: 10 }}
.
Вы можете увидеть это со встроенными стилями CSS в JSX. React не требует от вас использования встроенных стилей (классы CSS отлично подходят для большинства случаев). Но когда вам нужен встроенный стиль, нужно передать объект атрибуту стиля:
Встроенные (inline) стили записываются в camelCase. Например, HTMLexport default function TodoList() { return ( <ul style={{ backgroundColor: 'black', color: 'pink', }} > <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> ); }
<ul style="background-color: black">
в компоненте будет записан как <ul style={{ backgroundColor: 'black' }}>
.
Другие примеры JavaScript объектов в фигурных скобках
Вы можете переместить несколько выражений в один объект и ссылаться на них в JSX внутри фигурных скобок:В этом примере объект JavaScriptconst person = { name: 'User Name', theme: { backgroundColor: 'black', color: 'pink', }, }; export default function TodoList() { return ( <div style={person.theme}> <h1>{person.name}'s Todos</h1> <img className="avatar" src="https://example.com/userpic.jpg" alt="userpic" /> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> ); }
person
содержит строку имени и объект темы:
Компонент может использовать эти значения изconst person = { name: 'User Name', theme: { backgroundColor: 'black', color: 'pink', }, };
person
следующим образом:
JSX очень минималистичен как язык шаблонов, потому что он позволяет вам организовывать данные и логику с помощью JavaScript.<div style={person.theme}> <h1>{person.name}'s Todos</h1>
Резюме
Теперь вы знаете почти все о JSX:- Атрибуты JSX внутри кавычек передаются как строки.
- Фигурные скобки позволяют добавить в разметку логику и JavaScript переменные.
- Они работают внутри содержимого тега JSX или сразу после
=
в атрибутах. {{
и}}
не являются специальным синтаксисом: это объект JavaScript, спрятанный внутри фигурных скобок JSX.