PageSpeed ​​Insights diagnosti c "Убедитесь, что текст остается видимым во время загрузки веб-шрифта" - PullRequest
Новая
       108

PageSpeed ​​Insights diagnosti c "Убедитесь, что текст остается видимым во время загрузки веб-шрифта"

1 голос
/ 14 июля 2020

Я получаю диагностику c на PageSpeed ​​Insights 

Ensure text remains visible during webfont load
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more.
URL
    
Potential Savings
…v1/aWB4m0aac….woff2(fonts.gstatic.com)     10 ms
…v21/nuFvD-vYS….woff2(fonts.gstatic.com)    10 ms
…v13/6xK3dSBYK….woff2(fonts.gstatic.com)    10 ms

И я пытаюсь исправить это, изменив 

  <link rel="stylesheet" href="https://fonts.googleapis.com" />

на 

<link rel="stylesheet" href="https://fonts.googleapis.com/display=swap" />

Но на самом деле это вызывает консольную ошибку

Я знаю, что PageSpeed ​​Insights рекомендует добавлять font-display: swap к @fontface, но я не знаю, что такое @fontface.

Я использую Bootstrap и Гэтсби

Я знаю, что есть еще gatsby-plugin-web-font-loader. Есть ли способ использовать это, чтобы избежать этой диагностики c?

Это все случаи, когда font-family появляется в моей программе. Я использую scss, поэтому большинство из них являются переменными

Я указываю шрифт только один раз в своей программе и думаю, что bootstrap выбирает шрифт в остальное время 

blockquote > p {
   font-family: 'Montserrat', sans-serif;
}

Обновление, сейчас я использую этот плагин 

{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `Montserrat`,
      `Helvetica Neue`,
      `Helvetica`,
      `Arial`
      
    ],
    display: 'swap'
  }
},

Ответы [ 2 ]

2 голосов
/ 14 июля 2020

Вы допустили небольшую ошибку.

Это должно быть

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=TheFontYouWantToUse&display=swap />

Если вы сделаете прямой sla sh, как показано в вашем примере, это приведет к в 404 не найден, отсюда и ошибка консоли. Замените его параметром URL (&), и он должен работать нормально.

@fontface - это просто способ загрузки шрифта из таблицы стилей.

Например, в вашем основном CSS файл, вы можете добавить следующее, и в него также будет загружен шрифт. Обратите внимание, что для свойства font-display установлено значение swap. 

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}
1 голос
/ 14 июля 2020

@font-face - это правило, которое позволяет вам использовать несколько правил font-family вместо того, чтобы загружать его в каждый селектор.

Среди всех плагинов шрифтов в Gatsby я рекомендую gatsby-plugin-google-fonts, потому что он позволяет отображать шрифты и переключаться между ними. 

 plugins: [
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [
          `limelight`,
          `source sans pro\:300,400,400i,700` // you can also specify font weights and styles
        ],
        display: 'swap'
      }
    }
  ]

Это действительно полезно, так как предварительно загружает шрифт, не влияя на отображение (благодаря свойству swap).

В Gatsby, <link rel="stylesheet" href="https://fonts.googleapis.com" /> эта конфигурация автоматизирована, поэтому вам не нужно ее трогать. Лучше предварительно визуализировать их с помощью плагина, так как в этом сила Gatsby.

...