Шрифты display для чего

Ускоряем веб-шрифты за счет свойства font-display

к.э.н. Лавлинский Николай Евгеньевич, технический директор ООО «Метод Лаб»

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

Как отрисовывают шрифты браузеры

По умолчанию различные браузеры имеют свой алгоритм ожидания шрифтов и рендеринга текста. Существует понятие задержки (timeout), это время которое браузер готов подождать до получения шрифта. Далее происходит показ подменного шрифта (fallback). После этого браузер может получить шрифт и произвести замену на нужный шрифт (swap). В таблице ниже показано поведение различных браузеров по умолчанию.

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

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

И здесь нам на помощь приходит новое свойство font-display.

Свойство font-display

Это новое свойство контролирует поведение браузера по поводу рендеринга шрифтов. Всего существует пять вариантов значений: auto, block, swap, fallback, optional. Указывается оно в блоке @font-face, как одно из свойств.

Варианты свойства font-display.

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

Использование свойства font-display позволяет тонко регулировать поведение браузера и по сути обходить ограничения по скорости сети для максимально быстрой отрисовки полезного контента. Конечно, это не отменяет использования всех остальных методов оптимизации веб-шрифтов, но позволяет по-другому взглянуть на приритет загрузки ресурсов. Например, если шрифт загружается в режиме swap, то его можно не указывать с помощью механизма preload (подробнее о preload в этой статье).

Источник

font-display

Время чтения: 6 мин

Обновлено 23 сентября 2021

Кратко

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

Пример

Как пишется

Как это понять

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

Запасной шрифт

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

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

Невидимый запасной шрифт

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

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

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

Период блокировки

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

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

Период замены

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

Период сбоя

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

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

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

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

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

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

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

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

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

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

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

Подсказки

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

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

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

Источник

Стоит ли хранить Google Fonts на своём сервере?

В последние несколько недель, по стечению обстоятельств на работе и в сторонних проектах, я узнал много о веб-шрифтах, а также много нового о Google Fonts в частности. Благодаря этому я могу дать более развернутый ответ на вопрос, который в прошлом мне казался простым: стоит ли вам хранить Google Fonts на своём сервере?

Говоря объективно, признаю, шрифты — не моя сильная сторона. Я предпочитаю более практичный подход и не зацикливаюсь на дизайне (посмотрите на этот сайт и убедитесь, что так и есть) и прежде не чувствовал необходимости в использовании нестандартных шрифтов. Конечно, они выглядят немного приятнее и «брендируют» текст. Но для основного текста толку в них мало. Я никогда не оценивал статью (или иначе относился к её содержанию), только потому что для её подачи использовался красивый шрифт. Тем не менее, мне было полностью понятно негативное влияние дополнительных шрифтов на производительность и скорость загрузки страницы, так что, возможно, из-за этого я предвзят.

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

Self-Hosted vs Внешние ресурсы

Несколько лет назад считалось нормой использовать CDN для подключения общих ресурсов (например, jQuery с code.jquery.com — и да, им до сих пор очень даже пользуются). Чтобы внести ясность, под CDN здесь я имею в виду загрузку ресурсов с чужого домена, а не ваш собственный CDN.

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

Источник

CSS font display: будущее рендера шрифтов в вебе

Дата публикации: 2017-10-30

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

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

Встречайте дескриптор font display CSS для правила @font-face. Это CSS свойство представляет стандартизированный подход к данному поведению и позволяет разработчикам контролировать процесс.

Использование font-display

Прежде чем подробно разобрать различные функции font-display, давайте быстро взглянем, как использовать его в CSS. Прежде всего, font-display не является свойством CSS. Как было сказано в начале, это дескриптор правила @font-face. (пример):

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

В этом коде я задаю значение swap для шрифта Saira Condensed. Все возможные значения: auto, block, swap, fallback, optional

Значение по умолчанию для font-display – auto.

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

Таймлайн font-display

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

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

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

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

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

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

Давайте рассмотрим, как все эти значения управляют загрузкой и отображением шрифтов.

font-display: auto

После короткого блокового периода это значение увеличивает период подмены до бесконечности (в спецификации рекомендуют 3 секунды). В таком случае период отказа отсутствует.

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

Описанное поведение показано в видео ниже, где используется простая тестовая страница со специальным шрифтом в заголовке:

В начале загрузки страницы заголовок невидим, но он присутствует в DOM. Примерно через 3 секунды если шрифт все еще не доступен, текста становится видимым с фолбек шрифтом. В демо видео я имитирую слабое соединение с помощью панели разработчика Chrome. Как только шрифт загружается, заголовок повторно рендерится.

font-display: swap

С этим значением блоковый период сжимается до 0, а период подмены достигает бесконечности. Здесь также отсутствует период отказа. Другими словами, браузер не ждет шрифт и сразу рендерит текст с фолбек шрифтом. Как только шрифт загружается, текст рендерится заново. Давайте проверим:

font-display: fallback

Это первое значение, в котором есть период отказа. После очень короткого блокового периода (рекомендуется 100ms) наступает короткий период подмены (рекомендуется 3s). Если к концу этого времени шрифт все еще не готов, текст будет отображаться с фолбек шрифтом на все время посещения страницы. Посетителей не раздражают сдвиги в макете, которые могут снизить UX. В первом видео ниже шрифт загружается после более чем 6 секунд, поэтому он никогда не будет применен:

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

font-display: optional

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

requires для block

important для swap

preferable для fallback

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Значение optional, скорее всего, не будет меняться. Оно и так отлично описывает поведение. С этим значением шрифт считается необязательным для рендера страницы, что говорит браузеру: «если шрифт уже доступен, используй его. Если нет, не так важно, используй фолбек шрифт. Шрифт может загрузиться к посещению будущих страниц».

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

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

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

В следующем видео страница перезагружается с теми же настройками сети, но в этот раз включен кэш для имитации второго посещения:

И вот оно, теперь заголовок рендерится с ожидаемым шрифтом. Прежде чем продолжим, заметьте, что для блокового периода со значениями fallback и optional рекомендуется очень небольшая задержка в 100ms. Это позволяет кратковременно отображать быстро загруженный шрифт (или шрифт из кэша), прежде чем использовать фолбек шрифт. Таким образом, избегается эффект «мигания нестилизованного текста» или VYN/

Мне самому интересно, почему при font-display: swap блоковый период сжимается до 0, а не использует тот же короткий интервал, как для optional. Оказывается, в GitHub репозитории спецификации открыт баг, где сказано, что swap должен использовать небольшую задержку, как и остальные значения.

О фолбек шрифте

Выше я несколько раз упомянул фолбек шрифт. Но откуда он берется? Фолбек шрифт – первый доступный для представления шрифт в стеке шрифтов, который задается с помощью свойства font-family на элементе. Например, на тестовой странице значение font-family для заголовка:

Источник

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

Дата публикации: 2017-05-05

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

Значения

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

Зачем нам font-display

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

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

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

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

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

Автор: Geoff Graham

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник