ChatGPT на русском языке, бесплатноНовости и обновления в Telegram
На sponsr есть решения ваших задач
Полезные видео о фронтенде. Подпишись на Rutube
Как подключить шрифт в React
год назад·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;
CSI, SSI, ESI в композиции микрофронтендов
год назад·1 мин. на чтение
Что такое Client Side Include, Server Side Include и Edge Side Include?
Client Side Include - CSI (Включение на стороне клиента)
Client Side Include (CSI) является довольно знакомой для фронтенд-разработчиков возможностью, в основном это вызов Ajax. Что выделяет его, так это контент, который возвращает запрос. Тип контента -html/text
, похожий на обычный HTML, который мы используем. В этом контексте мы не запрашиваем фрагмент данных, вместо этого мы ожидаем фрагмент HTML.
Реализация CSI не нова, CSI используется еще с 2000 года. Проблема CSI заключается в том, что если вы используете этот подход слишком интенсивно, пользователь сайта может ждать контента во время загрузки сайта. Это означает, что поисковая система может быть не в состоянии проиндексировать нужный контент при первой загрузке. По этой причине рекомендуется использовать этот подход только для определенных элементов, таких как счетчик, футер или что-либо, что не привлекает основное внимание пользователя и не находится в верхней части экрана.<body> Hello World <footer> <h-include src="a server address"></h-include> </footer> </body>
Server Side Include - SSI (Включение на стороне сервера)
Как видно из названия, включение на стороне сервера (SSI) не происходит на компьютере клиента.Вместо этого, когда сервер анализирует HTML-файл, он проверяет определенные строки, помеченные<body> Hello World <!--#include virtual="/..." --> </body>
#include
. Для любых найденных включений он извлечет содержимое и вставит его в это место, прежде чем вернуть окончательный документ.
Преимущество SSI заключается в том, что, как правило, серверы работают быстрее по сравнению с клиентским компьютером. Не говоря уже о том, что количество запросов между клиентами и серверами сокращается до 1. Таким образом, обычно мы можем получить время отклика около 1 мс по сравнению с временем отклика 50 мс при вызове API.
При этом не стоит злоупотреблять использованием большого количества включений на одной страницу. Для каждого включения серверу необходимо выполнить несколько вызовов и дождаться завершения всех вызовов, прежде чем он сможет агрегировать файл. Это может занять больше времени, чем вы ожидаете, не говоря уже о том, что один из вызовов может завершиться сбоем. Таким образом время отклика может вырасти до 500 мс и больше. Любое время, выходящее за рамки 1 сек, может стать критичным для продакшен сервера.
Поэтому разумно использовать SSI только для основного содержимого страницы, а не для каждого декоративного элемента (например счетчик или футер и т.д.). Также можно попробовать комбинировать CSI и SSI.
SSI также не новая технология. Во времена, когда существовали только бэкенд-разработчики, каждый фрагмент HTML-шаблона, собранный на сервере, можно было назвать SSI.
Edge Side Include - ESI
Идея включения на Edge Side (на стороне CDN), была предложена еще в 2001 году, но с тех пор она так и не стала общепринятой. Тем не менее, она может решить проблемы SSI. Имейте в виду, что ESI происходит и на сервере.С точки зрения использования, это не слишком отличается от включения SSI. Считается, что в некоторых реализациях ESI это улучшает время до первого байта (TTFB). Потому что он может сначала вернуть доступный документ, прежде чем все включения будут скачаны и возвращены. Это похоже на комбинацию CSI и SSI, за исключением того, что все обрабатывается на сервере.<body> Hello World <esi:include src="a server address" /> </body>