#html #css #reactjs #google-fonts
#HTML #css #reactjs #google-шрифты
Вопрос:
Я использую шрифт Google в своем проекте react, и всякий раз, когда я открываю свой сайт, проходит очень заметная доля секунды, когда мой текст, в котором используется шрифт, сначала загружается другим шрифтом, а затем сразу меняется на правильный шрифт.
Что здесь происходит? И как мне предотвратить это?
Загрузка шрифта в public/index.html
<link
href="https://fonts.googleapis.com/css2family=Bebas Neueamp;display=swap"
rel="stylesheet"
/>
добавление шрифта в класс в src/index.css
.bg-header {
font-family: "Bebas Neue", sans-serif;
color: darkorange;
text-decoration: underline;
position: absolute;
bottom: 10%;
left: 5%;
font-size: 75px;
}
html-тег в компоненте react
<h5 className="bg-header">{getHeader()}</h5>
Ответ №1:
Мы можем использовать подсказку «Предварительная загрузка» ресурса, чтобы сообщить браузеру, что мы хотим, чтобы наши файлы шрифтов начали загружаться сразу, а не после анализа CSS. Это помогает быстрее загружать шрифт.
Большинство основных браузеров поддерживают предварительную загрузку и другие подсказки по ресурсам (Firefox также в настоящее время находится в разработке, чтобы добавить это). Добавление этого в ваш HTML будет выглядеть так:
<link rel="preload" as="font" type="font/woff2"
href="<FONT LOCATION>" crossorigin>
Комментарии:
1. Я попробовал, но шрифт просто не загрузился. Я проверил предоставленную вами ссылку, и мне показалось, что href в примере указывает на локальный файл. Я не думаю, что это работает с вызовом API Google
2. Жаль это слышать. Я постараюсь найти решение.
3. Не беспокойтесь. Тем не менее, спасибо за помощь. Если я в конечном итоге сдамся и прибегну к загрузке шрифта, я использую этот метод.
4. @LukeLewis Я ценю ваше терпение. Хотел бы я сделать для вас больше 😉
Ответ №2:
CSS: отображение шрифта
Если вы действительно не хотите, чтобы шрифт менялся местами, вы можете использовать:
body {
font-display: block;
}
Или, возможно, более удобный способ:
body {
font-display: fallback;
}
Однако это может повредить вашему рейтингу в поисковых системах, и вам следует прочитать о том, почему шрифты по умолчанию настроены на замену. Значение по умолчанию для font-display свойства равно auto .
Вы можете прочитать о свойстве CSS font-display здесь https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display .
Свойство отображения шрифтов Google
При импорте шрифтов Google вы можете указать параметр отображения шрифта в URL-адресе шрифта:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300amp;display=swap" rel="stylesheet">
Обратите внимание на display=swap часть URL.
Другие ресурсы
Эти статьи также будут очень полезны:
Комментарии:
1. Я попытался возиться с отображаемой частью URL, чтобы изменить значения отображения шрифта. Блок показался наиболее подходящим, поскольку он рисует «невидимый» текст для периода блока. Однако, поскольку мой текст подчеркнут, что интересно, он не получает такой же «невидимой» обработки и вытягивается в течение этого периода блока. Кроме того, я считаю, что невидимый текст имеет больший интервал, что приводит к заметному более длинному подчеркиванию в течение периода блока. Похоже, мне, возможно, придется просто сохранить шрифт локально.