От автора: вы знаете о font display CSS? Это здорово. Это свойство CSS, которое можно использовать в блоках @font-face для управления тем, как визуально загружается этот шрифт. Загрузка шрифта на самом деле довольно сложная вещь. По этой ссылке вы найдете пример из руководства Зака Лизермана, которое содержит более 10 стратегий загрузки шрифтов, включая стратегии, которые применяют встроенный критический CSS подмножеств шрифтов в сочетании с загрузкой остальных шрифтов позже через JavaScript. Это далеко не увеселительная прогулка.
А вот использование font-display похоже на увеселительную прогулку. Это всего лишь одна строка CSS. Он не решает все, что могут более экзотические демоны Зака, но с помощью этой одной строки можно сделать довольно много. В последнее время поддержка этой функции значительно улучшилась. Сейчас она реализована в Firefox 58+, Chrome 60+, Safari 11.1+, iOS 11.3+ и Chrome на Android 64+. Довольно хорошо.
Что это нам дает? Возможность управлять FOUT и FOIT, как необходимо для вашего проекта — это две вещи, которые представляют сложность при загрузке шрифтов.
Напоминаю:
FOUT = Flash of Unstyled Text
FOIT = Flash of Invisible Text
Ничего особенного. В идеальном мире наши пользовательские шрифты отображаются сразу. Но так как в реальном мире это невозможно, мы должны выбирать на основе приоритетов. Лучший ресурс по этой теме — это страница с пояснениями Моники Динкулеску:
Я бы обобщил это примерно так:
Если у вас все в порядке с FOUT, вам, вероятно, лучше всего будет использовать font-display: swap;, которое будет отображать резервный шрифт довольно быстро, и заменять его на пользовательский шрифт после его загрузки.
Если у вас все в порядке с FOIT, вам, вероятно, лучше всего будет использовать font-display: block;, которое довольно похоже на текущее поведение браузера, когда он ничего не отображает, поскольку ждет пользовательский шрифт, но в конечном итоге использует резервный вариант.
Если вы хотите, чтобы пользовательский шрифт отображался вообще немедленно, если он есть, font-display: optional; это то, что вам нужно. Он по-прежнему будет загружаться в фоновом режиме и, вероятно, будет загружаться на следующей странице.
Это довольно приличное количество вариантой для одной строки CSS. Но опять же, помните, если вы используете большой текстовый сайт с пользовательскими шрифтами, руководство Зака может помочь вам сделать больше.
Я почти выхожу на финишную прямую и говорю: каждый блок @font-face должен содержать свойство font-display. С единственным исключением на случай, если вы делаете что-то экзотическое и по какой-то причине хотите сохранить поведение браузера по умолчанию.
Хотите услышать что-то расстраивающее? Мы уже упоминали font-display: block ;. Разве вы не подумали бы, ну, это наверное блокирует визуализацию текста, пока пользовательский шрифт не загрузится? Но нет, это не так. Это было бы прекрасное решение для чего-то вроде шрифтов иконок, где иконка (возможно) не имеет смысла, если пользовательский шрифт не загружается. Увы, для этого нет решения в font-display.
И, черт возьми, было бы неплохо, если бы Google Fonts разрешили нам использовать это?
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.