Свойство CSS font-display

Свойство CSS font-display

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

Значения

@font-face {
  font-family: 'MyWebFont'; /* Задаем имя кастомного шрифта */
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff'); /* Задаем ссылки */
  font-display: fallback; /* Задаем поведение браузера на время загрузки */
}

Свойство font-display принимает 5 значений:

auto (по уомлчанию). Браузер использует стандартный метод загрузки, который зачастую похож на значение block.

block. Браузер прячет текст до полной загрузки шрифта. Если точнее, то браузер отрисовывает текст прозрачным цветом, после чего заменяет его на шрифт. Метод также известен как «мигание невидимого текста» или МНТ.

swap. Браузер отображает фолбек шрифт до полной загрузки кастомного шрифта. Метод также известен как «мигание нестилизованного текста».

fallback. Что-то среднее между auto и swap. Браузер скрывает текст примерно на 100ms, и если шрифт не успел загрузиться, отображается фолбек до тех пор, пока не загрузится кастомный шрифт.

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

Зачем нам font-display

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

Затем пришло правило @font-face и дало веб-дизайнерам и front-end разработчикам силу, о которой они и подумать не могли раньше. С помощью этого правила мы могли загружать файлы шрифтов на сервер, задавать имена шрифтов и указывать ссылки на них. Это правило дало толчок сервисам типа Google Fonts, которые протолкнули кастомные шрифты в массы. Главное препятствие, отделяющее веб-дизайн от печатного дизайна, было преодолено.

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

Еще одна проблема, которая возникла при использовании пользовательских шрифтов – «мигание нестилизованного текста». Раньше браузеры по умолчанию отображали системный шрифт, ожидая загрузки кастомного. Веб-страницы стали загружаться быстрее, но веб-дизайнеров беспокоил тот факт, что это отвлекало пользователей и искажало дизайн. Сейчас браузеры скрывают текст до тех пор, пока не загрузится кастомный шрифт, и это явление получило название «мигание невидимого текста» или МНТ.

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

Автор: Geoff Graham

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Препроцессоры Sass и Less

Автоматизация и упрощение Front-end разработки c помощью препроцессоров Sass и Less

Узнать подробнее

Метки:

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree