/ 

Управляем поведением font-face в CSS

Когда вы загружаете шрифт через font-face, браузер решает что отобразить пока шрифт загружается. Браузеры ждут некоторое время, перед тем как решить что делать дальше.

Браузер Время ожидания Запасной шрифт Замена шрифта
Chrome 35+ 3 секунды + +
Opera 3 секунды + +
Firefox 3 секунды + +  
Internet Explorer 0 секунд + +
Safari нет ожидания - -
  • Chrome и Firefox ждут 3 секунды перед тем, как отобразить текст запасным шрифтом. В дальнейшем, когда шрифт загрузится элементы использующие этот шрифт перерисуются с новым шрифтом. Возможно вы замечали как некоторые страницы “мерцали” при смене шрифта.
  • Internet Explorer не ждет трех секунд, а сразу отрисовывает текст: если браузер еще не загрузил шрифт, то используется запасной. После загрузки шрифта элементы перерисуются.
  • В Safari нет времени ожидания

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

Временная шкала отображения шрифта

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

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

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

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

Контролируем отображение шрифта

Свойство font-display определяет как шрифт отобразится, в зависимости от того, когда шрифт загрузят.

Имя font-display
Для @font-face
Значения auto, block, swap, fallback, optional
По умолчанию auto
‘auto’
Использует поведение браузера по умолчанию. Обычно это поведение ‘block’.
‘block’
Устанавливает короткий период блокировки (3 секунды) и бесконечный период замены.

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

‘swap’
Устанавливает период блокировки в 0 секунд и бесконечный период замены.

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

‘fallback’
Устанавливает очень короткий период блокировки (100 мс или меньше) и короткий период замены (3 секунды).

Работает так-же как и swap, но если шрифт не загрузился в течении 3-х секунд, то браузер отрисует текст запасным шрифтом. Подходит для текста предназначенного для вдумчивого чтения. В таком случае шрифт играет второстепенную роль. Если он быстро не загрузился, то не стоит отвлекать пользователя мерцанием от замены шрифта.

‘optional’
Устанавливает очень короткий период блокировки (100 мс или меньше) и период замены в 0 секунды.

Похоже на ‘fallback’, но по истечению 3-х секунд, браузер может или прервать загрузку (при медленном интернете) или понизить приоритет загрузки. Когда браузер загрузит шрифт, он все равно продолжит отображать текст запасным шрифтом, но если вы обновите текущую или перейдете на другую страницу, для которой установлено значение ‘optional’ и используется тот-же шрифт, то браузер отрисует текст загруженным шрифтом.

Видео пример работы свойства font-display

Пример работы CSS свойства font-display

Как протестировать

Свойство пока работает только в Chrome Canary. Чтобы посмотреть на его работу нужно:

  • Запустить Chrome Canary
  • Открыть флаги chrome://flags
  • Включить “enable-experimental-web-platform-features”
  • Перезапустить Canary

Когда использовать

В Canary это свойство появилось 1 декабря 2015 года, поэтому думаю что в течении 3-6 месяцев оно заработает в стабильной версии. Но уже можно добавить одну строчку CSS кода, чтобы в будущем сайт отображал шрифты выбранным вами способом. Я бы ставил по умолчанию font-display: swap.

Дополнительно

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

⌘ ⌘ ⌘
Поделиться
Отправить
Адекватное подчеркивание ссылок
Фронтенд

Адекватное подчеркивание ссылок

Как исправить поведение text-decoration: underline

За и против. Оформление незагруженных изображений.
Фронтенд

За и против. Оформление незагруженных изображений.

Незагруженные изображение — не та проблема, которую нужно срочно решать. С изображениями есть другая, более важная, проблема.

Fira Code: шрифт с лигатурами для кода
Инструменты

Fira Code: шрифт с лигатурами для кода

Моноширинный шрифт Fira Code объединяет конструкции языков программирования из нескольких символов в один, визуально понятный и приятный.

Старт курса по архитектуре JavaScript приложений в SmartJS академии
Фронтенд

Старт курса по архитектуре JavaScript приложений в SmartJS академии

Краткое содержание вводной лекции курса по архитектуре современных JavaScript приложений в SmartJS академии