Подобно тому, как большие JS-файлы разбиваются на несколько мелких и загружаются по необходимости, файлы шрифтов так же могут быть разделены на более мелкие подмножества. Эта практика называется «font subsetting» или «разделение шрифта на подмножества»
Количество глифов в шрифте зависит от поддерживаемых языков. Некоторые шрифты содержат практически все символы Unicode, в то время как шрифты с поддержкой только английского языка содержат ограниченный набор. Чем больше глифов, тем больше размер шрифта.
На русскоязычных сайтах используются в основном символы кириллицы, цифры и основные знаки пунктуации. В Украинском, Белорусском и других языках славянского происхождения к основным кириллическим символам добавляются ещё символы расширенной кириллицы.
Латинские символы практически не будут использоваться, не говоря уже про символы из группы CJK (Chinese, Japanese, Korean) и других языков. Проблема та же, что с неиспользуемым JS-кодом, которая решается разделением кода и tree shaking. Аналогично можно поступить со шрифтами.
Один большой шрифт с множеством символов можно разделить на несколько:
- Шрифт с базовой кириллицей — основные буквы кириллицы, цифры, основные печатаемые знаки препинания и символы, можно ещё добавить типографические кавычки, длинные тире, многоточие и так далее;
- Шрифт с расширенной кириллицей — специфические буквы и символы (диакритические знаки) для Украинского, Белорусского, Болгарского, Сербского и других языков;
- Шрифт базовой латиницы — основные буквы латинского алфавита;
- Шрифт расширенной латиницы — специфические буквы и символы (диакритические знаки) для Немецкого, Польского, Литовского, Турецкого и других языков;
- Шрифты других подмножеств при необходимости.
Латиница на русскоязычном сайте пригодится для терминов, названий и переводчиков. Я посещаю англоязычные сайты и иногда использую функцию перевода страницы. Точно так же делают иностранцы. Не очень красиво, если вместо дизайнерского шрифта загрузится Times New Roman.
Существует несколько способов разделить шрифт. Самый простой — использовать Google Fonts. Не в том смысле, чтобы подключать через него шрифты, я так делать не рекомендую. А использовать его для получения готовых подмножеств:
1. находите шрифт на Google Fonts;
2. копируете сгенерированную ссылку из
<link rel="stylesheet">;3. открываете ссылку в новой вкладке, там будет набор директив
@font-face;4. копируете нужные подмножества (помечены комментариями)
5. скачиваете соответствующие файлы шрифтов из
src;6. добавляете
@font-face в проект и подставляете ссылки к скачанным файлам.Другой способ — использовать Font subsetting. Загружаете шрифт, указываете символы или Unicode-последовательности и получаете шрифт, состоящий только из указанных символов. Третий способ — воспользоваться CLI-инструментом glyphhanger, подробнее в статье Зака Лезермана.
Чтобы браузер понял, когда и какое подмножество шрифта использовать, ему нужно знать, какие символы есть в шрифте. Эта информация задаётся свойством
unicode-range внутри директивы @font-face:/* cyrillic */
@font-face {
/* ... */
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
Cвойство
unicode-range содержит список символов в формате Unicode. Можно указать конкретный символ (U+2116 — знак номера «№») или диапазон (U+0410-044F — от буквы «А» до буквы «я»). Список значений Unicode можно посмотреть в таблице.Загружая страницу, браузер собирает информацию обо всех символах. Если среди элементов, использующих указанный шрифт, есть хотя бы один символ из
unicode-range, то этот шрифт будет загружен. Если на странице нет ни одного символа из unicode-range, шрифт не будет загружаться.#css #performance