font-display
The font-display descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.
Syntax
Values
The font display strategy is defined by the user agent.
Gives the font face a short block period and an infinite swap period.
Gives the font face an extremely small block period and an infinite swap period.
Gives the font face an extremely small block period and a short swap period.
Gives the font face an extremely small block period and no swap period.
Note: In Firefox, the preferences gfx.downloadable_fonts.fallback_delay and gfx.downloadable_fonts.fallback_delay_short provide the duration of the «short» and «extremely small» periods, respectively.
Description
The font display timeline
The font display timeline is based on a timer that begins the moment the user agent attempts to use a given downloaded font face. The timeline is divided into the three periods below which dictate the rendering behavior of any elements using the font face.
Font block period
If the font face is not loaded, any element attempting to use it must render an invisible fallback font face. If the font face successfully loads during this period, it is used normally.
Font swap period
If the font face is not loaded, any element attempting to use it must render a fallback font face. If the font face successfully loads during this period, it is used normally.
Font failure period
If the font face is not loaded, the user agent treats it as a failed load causing normal font fallback.
5 шагов к быстрым веб-шрифтам
В предыдущем посте я писал о системных шрифтах и их преимуществах перед веб-шрифтами. Я поддерживал подход «сначала системные шрифты», утверждая, что по сравнению с системными шрифтами веб-шрифты (а) могут отрицательно повлиять на производительность, (б) использовать больше данных и (в) увеличить энергопотребление вашего сайта. Но сеть без веб-шрифтов была бы гораздо менее интересной — возможно, используя веб-шрифты более ответственно, мы сможем получить все их преимущества, сведя к минимуму недостатки.
В первой части этого руководства я расскажу о пяти методах улучшения производительности веб-шрифтов, которые, на мой взгляд, дают наибольший эффект при минимальных усилиях.
Благодарим Зака Лезермана, который подробно писал о веб-шрифтах на своем сайте. Стоит прочитать все его статьи, особенно The Font Loading Checklist и A Comprehensive Guide to Font Loading Strategies (которое действительно очень исчерпывающее), обе из которых оказались очень полезными, пока я писал этот пост.
В этом посте я буду использовать два термина, которые часто используются как синонимы, но которые традиционно относятся к разным вещам:
Гарнитура (typeface) — это полное семейство шрифтов, имеющих общий дизайн. Шрифт может включать любое количество начертаний или стилей (а в те времена, когда использовался металл или дерево, размеры тоже). Helvetica — это пример шрифта. Вы можете думать о гарнитуре как о семействе шрифтов.
Шрифт (font) — это единое начертание и стиль гарнитуры. В случае физического типа каждый шрифт будет помещен в свое собственное поле, содержащее глифы определенного размера, веса и стиля, например, «Helvetica Bold Italic на 10 типографском пункте». Векторный дизайн современных цифровых шрифтов позволяет бесконечно масштабировать один шрифт вверх и вниз, но вам все равно понадобится отдельный файл для каждого веса и стиля (если вы не используете вариативные шрифты, но это тема для второй части).
1. Используйте самые современные форматы файлов
Web Open Font Format 2.0 (woff2) на момент написания является самым маленьким и наиболее эффективным форматом файлов для веб-шрифтов. При использовании @ font-face at-rules в CSS убедитесь, что шрифт woff2 отображается раньше старых, менее эффективных форматов файлов, таких как ttf. Браузер будет использовать первый шрифт в списке, который он понимает, даже если это файл большего размера.
Если вам не нужна поддержка IE8, вам не понадобится ничего, кроме woff2 и woff. Если вам не нужна поддержка IE11, вам понадобится только woff2.
Если у вас есть только файл ttf (например, если вы загрузили шрифт из Google Fonts), вам нужно будет преобразовать его с помощью такого инструмента, как Online Font Converter. Если вы не используете шрифт с полностью открытой лицензией, сначала проверьте, разрешает ли это лицензия.
2. Используйте дескриптор font-display
Есть два акронима, которые вы часто увидите, когда начнете разбираться в стратегиях загрузки шрифтов:
- Flash of Invisible Text (foit) — это период времени, в течение которого текст невидим до того, как браузер загрузит веб-шрифт.
- Flash of Unstyled Text (fout) — это период времени, в течение которого текст отображается с использованием резервного шрифта до того, как браузер загрузит веб-шрифт.
Ничто из перечисленного не идеаленьно, но если вы используете веб-шрифты, что-то из этого, вероятно, произойдет при первом посещении вашего веб-сайта пользователем (надеюсь, при загрузке второй страницы браузер сможет обслуживать шрифты из своего кэша). Если мы возьмем наше at-rule font-face из предыдущего и добавим дескриптор font-display, мы сможем указать браузеру, какой из них мы предпочитаем.
Существует пять возможных значений font-display: первое, auto — поведение браузера по умолчанию (большинство браузеров предпочитают foit). Вот еще четыре:
swap сообщает браузеру, что мы хотим, чтобы текст отображался с использованием резервного шрифта до тех пор, пока веб-шрифт не будет загружен (т.е. мы предпочли бы использовать fout). Независимо от того, займет ли это 5 секунд или 5 минут, как только шрифт будет загружен, он будет заменен. Это хорошая основа, потому что она позволяет посетителям веб-сайта сразу же начать читать ваш контент, но обязательно выберите аналогичный вариант (мы: Во второй части этой серии статей мы рассмотрим резервные варианты), чтобы предотвратить сильное смещение макета при смене шрифтов.
block
Если мы предпочитаем, чтобы браузер скрыл текст до тех пор, пока не загрузится веб-шрифт (т.е. мы предпочли бы foit), мы можем использовать font-display: block. Однако текст не останется невидимым навсегда: если шрифт не загружается в течение определенного периода (обычно трех секунд), браузер все равно будет использовать резервный шрифт, заменяя его веб-шрифтом после его загрузки.
Если вам кажется, что это лучший вариант, потому что вы считаете, что изображение выглядит плохо, помните, что когда текст невидим, ваша страница не может использоваться, а ваш контент читься.
fallback
fallback аналогичен swap с двумя отличиями:
-
Он начинается с невероятно маленького (
Если вас не беспокоит, видит ли пользователь ваш веб-шрифт при первом посещении вашего сайта (скорее всего, они не так уж сильно переживают из-за этого), fallback — хороший выбор.
optional
optional похож на fallback, но дает шрифту очень короткий период времени (
100 мс) для загрузки, после чего он не будет заменен. Однако у него есть дополнительная функция, позволяющая браузеру решить прервать запрос шрифта, если соединение слишком медленное для загрузки шрифта.
3. Предварительно загрузите файлы шрифтов
Чтобы свести к минимуму период foit/fout, мы хотим загружать наши файлы веб-шрифтов как можно быстрее. Используя link rel = «preload» в нашем html head , мы можем указать браузеру начать выборку наших шрифтов раньше. Добавьте следующий тег в верхнюю часть вашего head (перед любым css), установив атрибут href для URL-адреса вашего файла шрифта:
link rel=»preload» href=»/typefesse.woff2″ as=»font» type=»font/woff2″ crossorigin
Добавляя этот тег, мы говорим браузеру начать загрузку нашего файла шрифта прямо сейчас, тогда как обычно это не начнется, пока он не найдет ссылку на конкретный шрифт в вашем CSS и не найдет элемент dom, который его использует.
Браузеры обычно достаточно умны, чтобы загружать шрифты только в том случае, если они необходимы на текущей странице. Использование предварительной загрузки отменяет это поведение, заставляя браузер загружать шрифт, даже если он не используется. По этой причине всегда предварительно загружайте только один формат каждого шрифта (woff2, если он у вас есть).
Чем больше шрифтов вы предварительно загрузите, тем меньше пользы вы получите от этого метода, поэтому отдавайте предпочтение тем шрифтам, которые отображаются «над сгибом» (первые 100vh, которые пользователь видит без прокрутки).
Вы можете узнать больше о предварительной загрузке в этой статье Йоава Вайсса: Preload: What Is It Good For?
4. Подберите файлы шрифтов
Создав поднабор шрифта, мы можем сгенерировать новый меньший файл шрифта, который включает только глифы (глиф — это отдельный знак или символ), которые нам нужны. Я использовал инструмент Font Subsetter в Everything Fonts, чтобы подобрать шрифт Space Grotesk Bold, используемый для заголовков на этом сайте для включения только символов из диапазона «Basic Latin». Это уменьшило размер файла версии woff2 с 30 КБ до 7 КБ.
Подмножество — мощный инструмент, но он имеет некоторые потенциальные недостатки. Если вы создаете веб-сайт, на котором отображается пользовательский контент, имена людей или названия мест, вам следует использовать символы, отличные от 26 стандартных букв, 10 цифр и нескольких символов, распространенных в английском письме.
Как минимум, вам следует подумать о диакритических знаках: глифах, которые появляются над или под символом, которые изменяют его произношение. Они распространены на языках, включая французский, испанский, вьетнамский, а также в транслитерированном (или «романизированном») тексте из таких алфавитов, как греческий или иврит; они также появляются в заимствованных словах (словах, взятых из другого языка).
Если вы слишком активно подбираете подмножества, вы можете даже получить сочетание шрифтов в одном слове.
Если бы я хотел написать о поделаках, мне, возможно, пришлось бы настроить файл подмножества шрифтов, который я использую для заголовков. Обратите внимание, как формы «â» и «é» (с диакритическими знаками) не соответствуют версиям этих букв без диакритических знаков.
К счастью, вам не нужно вручную проверять каждую страницу вашего сайта на наличие разных символов. Glyphhanger — это инструмент командной строки, который выполняет две функции: во-первых, он просматривает ваши веб-страницы и определяет используемые диапазоны символов Юникода (эти диапазоны соответствуют скрипту или языку, например, «Базовая латынь», «Кириллица», «Тайский»); во-вторых, он представляет собой подмножество файла шрифта, выводя новую версию, содержащую только символы из указанных диапазонов.
Начать работу с Glyphhanger может быть немного сложно (вам понадобятся python и pip) — Сара Суейдан объясняет, как ей удалось это сделать в этой статье: How I set up Glyphhanger on macOS for optimizing and converting font files for the Web.
Как и при изменении форматов файлов, убедитесь, что лицензия на ваш шрифт допускает подмножество.
5. Разместите шрифты самостоятельно
Это не универсальное правило, как большинство других. Есть две веские причины, по которым вы можете захотеть использовать размещенный сервис, такой как Google Fonts или Adobe Fonts:
Часто это самый дешевый или единственный законный способ использования определенных гарнитур в Интернете. Если у вас нет другого выбора, кроме как использовать одну из этих служб, узнайте, поддерживает ли она подмножество или добавление дескрипторов отображения шрифтов.
Они удобны: копирование и вставка строки html в вашего сайта будет быстрее, чем альтернатива: загрузка файлов шрифтов, преобразование и подмножество файлов шрифтов, затем написание @ font-face at-rules для каждого веса и стиля.
Если вы все еще используете Google Fonts исключительно из-за удобства, обратите внимание на google-webfonts-helper. Этот инструмент позволяет вам создать собственный пакет веб-шрифтов из полного набора шрифтов Google, определить нужные вес и наборы символов, а затем предоставить вам одну загрузку, содержащую все файлы css и шрифтов (в новейших форматах), которые вам нужны.
Миф №1 о веб-шрифтах
Возможно, вы слышали утверждение (которое повторяется в Google Fonts) о том, что если пользователь ранее посещал сайт, который загружает те же шрифты из того же источника, браузеру не нужно загружать их снова, потому что они кэшированы.
Когда-то это могло быть правдой, но я не могу найти доказательств того, что это достаточно обыденное явление, которое влияло бы на что-то. Фактически, и Google Chrome, и Safari явно запрещают совместное использование кэшированных сторонних ресурсов в разных доменах из-за проблем с отслеживанием.
Вот список веских причин не использовать размещенную службу и вместо этого размещать шрифты самостоятельно:
Производительность
Поиск домена требует времени, вы можете использовать предварительные подсказки ресурсов для облегчения ситуации, но всегда производительность всегда снижаться из-за открытия TCP-соединения с новым доменом. Возможно, поэтому на некоторых собственных сайтах Google (включая web.dev) теперь используются собственные шрифты вместо шрифтов Google.
Конфиденциальность
Платные службы веб-шрифтов, такие как Adobe Fonts, должны определять просмотры страниц для рассчетов, но они могут собирать больше данных, чем это строго необходимо. Если у вас есть выбор, загрузите шрифты с помощью css ( link rel = «stylesheet» ) вместо JavaScript ( script ), чтобы минимизировать объем данных, которые сторонняя организация может собирать о ваших пользователях.
Похоже, что Google Fonts собирает не так много посетителей веб-сайтов, как IP-адреса и строки User agent, но Google не действует полностью самоотверженно, предоставляя услугу бесплатно. Каждый из пятидесяти триллионов просмотров страниц с использованием шрифтов Google — это точка данных, которой у Google не было бы, если бы вместо этого веб-сайты использовали собственные шрифты.
Контроль
С автономными шрифтами вы полностью контролируете то, как именно вы загружаете шрифты, что позволяет вам обслуживать пользовательские подмножества, определять параметры отображения шрифтов и указывать, как долго браузер должен кэшировать файлы шрифтов.
Надежность
Сторонние сервисы могут замедляться, отключаться или вообще переставать работать. При самостоятельном размещении шрифтов, пока ваш веб-сайт работает, ваши шрифты будут доступны.
Заключение
Каждый из этих шагов может иметь преимущества сам по себе, но их совместное использование может привести к большим улучшениям. Если вы решите реализовать некоторые из шагов, описанных в этой статье, попробуйте использовать такой инструмент, как Lighthouse или Web Page Test до и после внесения изменений, чтобы увидеть эффект каждого отдельного изменения.
Во второй части мы рассмотрим некоторые более сложные техники, включая стратегии загрузки шрифтов JavaScript и вариативные шрифты. Мы также увидим важность выбора правильных резервных шрифтов и введем новый акроним — FOFT, Flash Of Faux Text.
Чтобы не терять свои находки по дизайну в тоннах закладок на компе, я создала телеграм-канал Дрын Дезигн. Все клевые и полезные материалы (туториалы, статьи, ссылки на аккаунты клевых чуваков), которые нахожу для себя, я буду постить туда. Угощайтесь.
CSS Font-display and how to use it
Yesterday we included a custom Google Font on our website and briefly mentioned the font-display option. Let’s dive deeper into what it is and how it works.
As we saw yesterday, custom fonts load slowly and block the browser from defining when your website is ready. This, in turn, makes Google think your website is slow, and nobody wants that.
So in modern browsers, we can use the font-display function.
Font Display options permalink
- auto : This is the default value and leaves the decision up to the browser. In most cases, it will be block .
- block : This tells the browser to hide the text until the font has fully loaded. This is the flash you see when it swaps on some sites.
- swap : It will start with the fallback font and swap once the font is loaded.
- fallback : This is a compromise between auto and swap . It will start with hiding the font briefly and then go into the swap routine.
- optional : This is much like the fallback method. It tells the browser to start with a hide and then transition into the fallback font. The excellent option here is that it allows the browser to see if the custom font is even used. If, for instance, a slow connection appears, they are less likely to see the custom font.
How to use font-display permalink
As seen in the previous example, we can use it as such:
What is a fallback font? permalink
So we talked about fallback fonts quite a bit, but what are those even?
So in the above example, the custom font is Amatic SC the system font is Times New Roman or Times , so in the case of using swap , we will first see Times New Roman and when the custom font has loaded it will show Amatic SC .
Browser Support permalink
Not all browsers support this, but I encourage you to use font-display . The browsers that don’t support it will decide for you.
Thank you for reading, and let’s connect! permalink
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Font display swap что это
Ensure text remains visible during webfont load
Published on Thursday, May 2, 2019 • Updated on Wednesday, April 29, 2020
Fonts are often large files with slow load times. Some browsers hide text until the font loads, causing a flash of invisible text (FOIT).
# How the Lighthouse font-display audit fails
Lighthouse flags any font URLs that may flash invisible text:
See the Lighthouse performance scoring post to learn how your page’s overall performance score is calculated.
# How to avoid showing invisible text
The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers:
The font-display API specifies how a font is displayed. swap tells the browser that text using the font should be displayed immediately using a system font. Once the custom font is ready, it replaces the system font. (See the Avoid invisible text during loading post for more information.)
# Preload web fonts
Use <link rel=»preload» as=»font»> to fetch your font files earlier. Learn more:
# Google Fonts
Add the &display=swap parameter to the end of your Google Fonts URL:
# Browser support
It’s worth mentioning that not all major browsers support font-display: swap , so you may need to do a bit more work to fix the invisible text problem.
Check out the Avoid flash of invisible text codelab to learn how to avoid FOIT across all browsers.
