Предварительная загрузка Google Fonts - PullRequest
Новая
       10

Предварительная загрузка Google Fonts

0 голосов
/ 12 июня 2018

Аудит Light House предполагает предварительную загрузку ключевых запросов, в частности двух шрифтов Google, которые я использую в своем приложении React.Член Light House предложил использовать: <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Я знаю, что он делает запрос, потому что я вижу его в водопаде и получаю это предупреждение консоли:

"Ресурс https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700 был предварительно загружен с использованием предварительной загрузки ссылки, но не использовался в течение нескольких секунд после события загрузки окна. Пожалуйста, убедитесь, что оно имеет соответствующее значение as и предварительно загружено намеренно. "

К сожалению, два шрифта не отображаются в моемприложение больше.Нужно ли определять их в моем CSS с помощью @ font-face или чего-то в этом роде?

1 Ответ

0 голосов
/ 02 июля 2019

Правильный способ предварительной загрузки шрифта - добавить ссылку preload и stylesheet.Упрощенный пример, основанный на MDN , выглядит следующим образом: 

<head>
  <meta charset="utf-8">
  <title>Preloading fonts</title>

  <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto&display=swap" as="style">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
</head>

<body>
</body>

В приведенном выше примере ссылка preload отправит запрос на выбор шрифта независимо от того, установлен он илине на клиенте, а затем используйте ссылку stylesheet для правильной загрузки и использования.

preload - это больше способ сообщить браузеру, что ресурс, вероятно, понадобится, так что он будетзапрашивается независимо, а затем, если вам это нужно или вы решите его использовать, вы можете.

Дополнительная информация
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...