Блог

Главная - Вопросы по программированию - Как минимизировать задержку загрузки шрифта?

Как минимизировать задержку загрузки шрифта?

#css #webfonts

#css #webfonts

Вопрос:

Я попробовал Google Lighthouse, и он указал мне на статью о том, как загружать шрифты без задержек:

https://developers.google.com/web/updates/2016/02/font-display

Я использую Open Sans, который я использовал для загрузки следующим образом:

 <link href="https://fonts.googleapis.com/css?family=Open Sans" rel="stylesheet">

В статье был пример, который я попытался использовать вместо:

 @font-face {
  font-family: 'Open Sans';
  font-display: block;
  src: local('Open Sans'), url(https://fonts.googleapis.com/css?family=Open Sans) format('woff2');
}

Это не работает. Что я делаю не так?

РЕДАКТИРОВАТЬ: нашел. Я должен сохранить тот font-family: "Open Sans" , который, как я думал, больше не использовался. Извините за шум.

Комментарии:

1. в каком браузере вы тестировали свой css?

2. Откройте https://fonts.googleapis.com/css?family=Open Sans в своем браузере и сообщите нам, похоже ли это на двоичные данные шрифта woff2 для вас …

3. @Sfili_81 Chrome.

4. Это URL таблицы стилей, которую вы получаете от Google, а не отдельного файла шрифта. Фактические URL-адреса файлов шрифтов можно найти там.

5. Вы можете просто скопировать и вставить все @font-face объявление (для любого варианта шрифта, который вам нужен) непосредственно из этой таблицы стилей …

Ответ №1:

вы забыли речевые знаки «», то, что вы хотите, здесь:

 @font-face {
  font-family: 'Open Sans';
  font-display: block;
  src: local('Open Sans'), url("https://fonts.googleapis.com/css?family=Open Sans") format('woff2');
}

Комментарии:

1. Спасибо, Дункан, но я не думаю, что в спецификациях указано, что они вам нужны (может быть, они разрешены?) developer.mozilla.org/en-US/docs/Web/CSS/@font-face