font-display

font-display — это не CSS-свойство, которое можно применить к конкретному элементу. Это так называемый дескриптор. Он применяется только внутри секции правил @font-face и описывает, как будет отображаться текст в зависимости от того, загружен шрифт или нет.

        
          
          @font-face {  font-family: MyGreatFont;  src:  url(my-great-font.woff) format('woff'),        url(my-great-font.eot) format('eot');  font-weight: 400;  font-style: normal;  font-display: fallback;}
          @font-face {
  font-family: MyGreatFont;
  src:  url(my-great-font.woff) format('woff'),
        url(my-great-font.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          @font-face {  font-display: auto;  font-display: block;  font-display: swap;  font-display: fallback;  font-display: optional;}
          @font-face {
  font-display: auto;
  font-display: block;
  font-display: swap;
  font-display: fallback;
  font-display: optional;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Чтобы понять, как работает свойство font-display, нужно сделать небольшой экскурс в анатомию загрузки и использования шрифтов.

Для начала пара определений.

В свойстве font-family мы можем через запятую перечислять несколько шрифтов.

С точки зрения браузера запасным является первый из перечисленных шрифтов, который уже загружен. Попытка отобразить запасной шрифт не должна вызывать его загрузки.

Сначала браузер находит запасной шрифт. Затем создаёт анонимное начертание (анонимный font-face) с использованием метрик запасного шрифта, но оставляет все символы незакрашенными (невидимыми) и использует это начертание для рендеринга текста. Текст остаётся невидимым, но занимаемое им место рассчитывается исходя из метрик запасного шрифта. Использование невидимого запасного шрифта не должно вызывать его загрузки.

В процессе загрузки страницы браузер должен отображать текстовое содержимое. Для любого символа на странице так или иначе определён шрифт, которым отображается этот символ. Зачастую на странице используются нестандартные шрифты, которых с большой долей вероятности нет в операционной системе пользователя. Для того чтобы такие шрифты подключить к странице, используется блок правил @font-face.

Для таких шрифтов в тот момент, когда символ должен показаться на странице, а шрифт ещё не загружен, запускается временная шкала загрузки. Он состоит из трёх этапов:

1. Период блокировки.
2. Период замены.
3. Период сбоя.

Рассмотрим этапы подробнее.

Если шрифт ещё не загружен, то в этот период любой элемент, который использует этот шрифт, должен быть отображён с использованием невидимого запасного шрифта.

Если шрифт успешно подгружается в период блокировки, то он используется, как обычно.

Этот период следует непосредственно за периодом блокировки. В это время, если необходимый шрифт ещё не загружен, любой элемент, который использует этот шрифт, должен быть отображён запасным шрифтом. Если в период замены шрифт будет успешно загружен, то он будет использоваться, как обычно.

Начинается сразу после периода замены. Если к этому времени необходимый шрифт ещё не загружен, то он помечается как неудачно загруженный и вместо него используется запасной шрифт. Если же шрифт загружен, то он используется, как обычно.

Теперь вернёмся к font-display. Значения этого свойства определяют длительность периодов таймлайна загрузки шрифта.

auto — стратегия загрузки шрифта определяется браузером в автоматическом режиме. То есть какую длительность периодов заложили разработчики браузера, такая и будет применяться. Зачастую эта стратегия очень близка к той, что задаётся значением block.

block — стратегия загрузки шрифта, при которой задаётся короткий (порядка 3 секунд) период блокировки и бесконечный период замены. Другими словами, пока грузится шрифт, браузер весь текст показывает невидимым запасным шрифтом, а после загрузки шрифта переключается на этот шрифт.

Используем это значение в исключительных случаях. Например, если страницу невозможно нормально использовать без именно этого шрифта. Яркий пример: иконочный шрифт. До момента загрузки такого шрифта при других стратегиях браузер будет показывать обычный символ алфавита вместо иконки, что может сбить с толку и не дать нормально пользоваться страницей.

swap — задаёт очень короткий (менее 100 миллисекунд) период блокировки и бесконечный период замены. При такой стратегии браузер практически сразу отображает текст запасным шрифтом, а затем, когда подгружён нужный шрифт, переключается на него.

Используем это значение, когда раннее отображение текста является приоритетной задачей, но отображение текста другим шрифтом не нарушает нормального использования страницы. Желательно такую стратегию применять только к небольшим фрагментам текста. Яркий пример: отображение логотипа компании. В целом другой шрифт не усложнит пользование страницей, но правильный логотип важен с точки зрения продвижения бренда.

fallback — такая стратегия, при которой задаётся очень короткий период блокировки (менее 100 миллисекунд), а так же короткий период замены (порядка 3 секунд). В этом случае браузер практически сразу отображает текст запасным шрифтом, затем, когда подгружён нужный шрифт, переключается на него, но если шрифт не загрузился, остаётся на запасном шрифте.

Желательно это значение использовать для основного текста, а также для больших фрагментов текста. Как правило, это значение используется в ситуациях, когда желательно отобразить текст нужным шрифтом, но ничего страшного, если он будет написан другим шрифтом. Использование этого значения помогает сразу же отобразить текст страницы, чтобы пользователь мог прочитать его как можно раньше.

optional — самая сложная стратегия: период блокировки очень короткий (порядка 100 миллисекунд), а вот период замены не задан.

Это значит, что если шрифт стал доступен в период блокировки (то есть очень быстро), то он и будет использоваться. В противном случае браузер считает, что ни в период блокировки, ни в период замены шрифт загрузить не удалось. Если к этому моменту шрифт ещё не понадобился для отрисовки элемента, браузер будет решать отменить загрузку этого шрифта или продолжить с очень низким приоритетом.

Более того, если браузер решит, что отображение текста важно для пользователя, то он может вообще не начинать загрузку шрифта, а сразу показать запасной шрифт.

Это значение лучше использовать для основного текста либо такого текста, отображение которого нужным шрифтом больше «приятное дополнение», нежели необходимость. Используем это значение, когда нужно отобразить текст как можно быстрее, а дизайнерская точность не является приоритетом.

💡 В чём же отличие fallback от optional?

При fallback браузер имеет порядка 3 секунд, чтобы переключиться с запасного шрифта на нужный.

При optional браузер может решить, что важнее показать текст как можно скорее и переключения на основной шрифт может вообще не произойти.

Важно понимать, что и при fallback и при optional даже при успешной загрузке нужного шрифта переключение на него может не случиться.