Уменьшить размер веб-шрифта

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

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

Анатомия веб-шрифта

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

Таблица глифов шрифта

При выборе шрифта важно учитывать, какие наборы символов поддерживаются. Если вам необходимо локализовать содержимое вашей страницы на несколько языков, вам следует использовать шрифт, который обеспечит единообразный внешний вид и удобство для ваших пользователей. Например, семейство шрифтов Google Noto предназначено для поддержки всех языков мира. Однако обратите внимание, что общий размер Noto со всеми включенными языками составляет более 1,1 ГБ для загрузки ZIP.

В этом посте вы узнаете, как уменьшить размер файла ваших веб-шрифтов.

Форматы веб-шрифтов

Сегодня в сети используются два рекомендуемых формата контейнеров шрифтов:

WOFF и WOFF 2.0 пользуются широкой поддержкой и поддерживаются всеми современными браузерами.

  • Поддержите вариант WOFF 2.0 в современных браузерах.
  • Если это абсолютно необходимо — например, если вам все еще нужна поддержка Internet Explorer 11 — используйте WOFF в качестве запасного варианта.
  • В качестве альтернативы рассмотрите возможность не использовать веб-шрифты для устаревших браузеров и вернуться к системным шрифтам. Это может быть более эффективно и для старых, более ограниченных устройств.
  • Поскольку WOFF и WOFF 2.0 охватывают все базы современных и устаревших браузеров, которые все еще используются, использование EOT и TTF больше не требуется и может привести к увеличению времени загрузки веб-шрифтов.

Веб-шрифты и сжатие

И WOFF, и WOFF 2.0 имеют встроенную функцию сжатия. Внутреннее сжатие WOFF 2.0 использует Brotli и обеспечивает сжатие на 30 % лучше, чем WOFF. Дополнительную информацию см. в отчете об оценке WOFF 2.0 .

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

Определите семейство шрифтов с помощью @font-face

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

Рассмотрите переменный шрифт

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

Переменные шрифты теперь поддерживаются всеми современными браузерами. Подробную информацию можно найти в разделе « Введение в переменные шрифты в Интернете» .

Выберите правильный формат

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

Во-первых, обратите внимание, что приведенные выше примеры определяют одно семейство Awesome Font с двумя стилями (обычным и курсивом ), каждый из которых указывает на другой набор ресурсов шрифтов. В свою очередь, каждый дескриптор src содержит приоритетный список вариантов ресурсов, разделенных запятыми:

  • Директива local() позволяет ссылаться, загружать и использовать локально установленные шрифты. Если в системе пользователя уже установлен шрифт, это происходит полностью в обход сети и является самым быстрым.
  • Директива url() позволяет загружать внешние шрифты и может содержать необязательную подсказку format() указывающую формат шрифта, на который ссылается предоставленный URL-адрес.

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

  1. Браузер выполняет макет страницы и определяет, какие варианты шрифта необходимы для отображения указанного текста на странице. Шрифты, которые не являются частью объектной модели CSS страницы (CSSOM), не загружаются браузером, поскольку они не требуются.
  2. Для каждого требуемого шрифта браузер проверяет, доступен ли шрифт локально.
  3. Если шрифт недоступен локально, браузер перебирает внешние определения:
    • Если подсказка формата присутствует, браузер проверяет, поддерживает ли он подсказку, прежде чем начать загрузку. Если браузер не поддерживает подсказку, он переходит к следующему.
    • Если подсказка формата отсутствует, браузер загружает ресурс.

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

Подмножество диапазона Юникода

В дополнение к свойствам шрифта, таким как стиль, толщина и растяжение, правило @font-face позволяет определить набор кодовых точек Юникода, поддерживаемых каждым ресурсом. Это позволяет разделить большой шрифт Unicode на более мелкие подмножества (например, латинский, кириллический и греческий) и загружать только те глифы, которые необходимы для отображения текста на конкретной странице.

Дескриптор unicode-range позволяет указать список значений диапазона, разделенных запятыми, каждое из которых может быть в одной из трех различных форм:

  • Одиночный код (например, U+416 ).
  • Диапазон интервалов (например, U+400-4ff ): указывает начальную и конечную кодовые точки диапазона.
  • Диапазон подстановочных знаков (например, U+4?? ): ? символы обозначают любую шестнадцатеричную цифру

Например, вы можете разделить семейство Awesome Font на латинское и японское подмножества, каждое из которых браузер загружает по мере необходимости:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

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

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

  1. Определите, какие подмножества необходимы:
    • Если браузер поддерживает подмножество диапазона Юникода, он автоматически выберет правильное подмножество. На странице просто необходимо предоставить подмножество файлов и указать соответствующие диапазоны Юникода в правилах @font-face .
    • Если браузер не поддерживает подмножества диапазонов Юникода, страница должна скрыть все ненужные подмножества; то есть разработчик должен указать необходимые подмножества.
  2. Создать подмножества шрифтов:
    • Используйте инструмент pyftsubset с открытым исходным кодом для подмножества и оптимизации ваших шрифтов.
    • Некоторые серверы шрифтов, такие как Google Font, по умолчанию автоматически поднастраиваются.
    • Некоторые службы шрифтов позволяют вручную задавать подмножества с помощью пользовательских параметров запроса, которые вы можете использовать, чтобы вручную указать необходимое подмножество для своей страницы. Обратитесь к документации вашего поставщика шрифтов.

Выбор и синтез шрифта

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

Вес шрифта

На диаграмме выше показано семейство шрифтов, которое предлагает три различных жирности:

  • 400 (обычный).
  • 700 (жирный).
  • 900 (очень жирный).

Все остальные промежуточные варианты (отмечены серым цветом) автоматически сопоставляются браузером с ближайшим вариантом.

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

Алгоритм сопоставления шрифтов CSS

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

В приведенном выше примере объявляется семейство Awesome Font , состоящее из двух ресурсов, которые охватывают один и тот же набор латинских глифов ( U+000-5FF ), но предлагают два разных «веса»: обычный (400) и жирный (700). Однако что произойдет, если одно из ваших правил CSS укажет другую толщину шрифта или установит для свойства font-style значение italic ?

  • Если точное совпадение шрифта недоступно, браузер заменяет наиболее близкий шрифт.
  • Если стилистическое соответствие не найдено (например, в приведенном выше примере не были объявлены варианты курсива), то браузер синтезирует собственный вариант шрифта.
Синтез шрифтов

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

Контрольный список по оптимизации размера веб-шрифта

  • Проверяйте и контролируйте использование шрифтов: не используйте слишком много шрифтов на своих страницах и для каждого шрифта сведите к минимуму количество используемых вариантов. Это помогает обеспечить более единообразную и быструю работу ваших пользователей.
  • По возможности избегайте устаревших форматов: форматы EOT, TTF и WOFF больше, чем WOFF 2.0. EOT и TTF — совершенно ненужные форматы, тогда как WOFF может быть приемлемым, если вам нужна поддержка Internet Explorer 11. Если вы ориентируетесь только на современные браузеры, использование только WOFF 2.0 — самый простой и наиболее эффективный вариант.
  • Подмножество ресурсов шрифтов: многие шрифты могут быть подмножествами или разделены на несколько диапазонов Юникода, чтобы доставлять только те глифы, которые требуются конкретной странице. Это уменьшает размер файла и повышает скорость загрузки ресурса. Однако при определении подмножеств будьте осторожны и оптимизируйте повторное использование шрифтов. Например, не загружайте на каждой странице разные, но пересекающиеся наборы символов. Хорошей практикой является создание подмножества на основе алфавита: например, латиницы и кириллицы.
  • Отдайте приоритет local() в вашем списке src : указание local('Font Name') первым в вашем списке src гарантирует, что HTTP-запросы не будут выполняться для уже установленных шрифтов.
  • Используйте Lighthouse для проверки сжатия текста .

Влияние на наибольшую отрисовку содержимого (LCP) и совокупный сдвиг макета (CLS)

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

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

Если ваши веб-шрифты имеют решающее значение для вашего брендинга — и, как следствие, для взаимодействия с пользователем — рассмотрите возможность предварительной загрузки шрифтов, чтобы браузер имел преимущество при их запросе. Это может сократить как период подкачки, если вы используете font-display: swap , так и период блокировки, если вы не используете font-display .

,

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

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

Анатомия веб-шрифта

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

Таблица глифов шрифта

При выборе шрифта важно учитывать, какие наборы символов поддерживаются. Если вам необходимо локализовать содержимое вашей страницы на несколько языков, вам следует использовать шрифт, который обеспечит единообразный внешний вид и удобство для ваших пользователей. Например, семейство шрифтов Google Noto предназначено для поддержки всех языков мира. Однако обратите внимание, что общий размер Noto со всеми включенными языками составляет более 1,1 ГБ для загрузки ZIP.

В этом посте вы узнаете, как уменьшить размер файла ваших веб-шрифтов.

Форматы веб-шрифтов

Сегодня в сети используются два рекомендуемых формата контейнеров шрифтов:

WOFF и WOFF 2.0 пользуются широкой поддержкой и поддерживаются всеми современными браузерами.

  • Поддержите вариант WOFF 2.0 в современных браузерах.
  • Если это абсолютно необходимо — например, если вам все еще нужна поддержка Internet Explorer 11 — используйте WOFF в качестве запасного варианта.
  • В качестве альтернативы рассмотрите возможность не использовать веб-шрифты для устаревших браузеров и вернуться к системным шрифтам. Это может быть более эффективно и для старых, более ограниченных устройств.
  • Поскольку WOFF и WOFF 2.0 охватывают все базы современных и устаревших браузеров, которые все еще используются, использование EOT и TTF больше не требуется и может привести к увеличению времени загрузки веб-шрифтов.

Веб-шрифты и сжатие

И WOFF, и WOFF 2.0 имеют встроенную функцию сжатия. Внутреннее сжатие WOFF 2.0 использует Brotli и обеспечивает сжатие на 30 % лучше, чем WOFF. Дополнительную информацию см. в отчете об оценке WOFF 2.0 .

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

Определите семейство шрифтов с помощью @font-face

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

Рассмотрите переменный шрифт

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

Переменные шрифты теперь поддерживаются всеми современными браузерами. Подробную информацию можно найти в разделе « Введение в переменные шрифты в Интернете» .

Выберите правильный формат

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

Во-первых, обратите внимание, что приведенные выше примеры определяют одно семейство Awesome Font с двумя стилями (обычным и курсивом ), каждый из которых указывает на другой набор ресурсов шрифтов. В свою очередь, каждый дескриптор src содержит приоритетный список вариантов ресурсов, разделенных запятыми:

  • Директива local() позволяет ссылаться, загружать и использовать локально установленные шрифты. Если в системе пользователя уже установлен шрифт, это происходит полностью в обход сети и является самым быстрым.
  • Директива url() позволяет загружать внешние шрифты и может содержать необязательную подсказку format() указывающую формат шрифта, на который ссылается предоставленный URL-адрес.

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

  1. Браузер выполняет макет страницы и определяет, какие варианты шрифта необходимы для отображения указанного текста на странице. Шрифты, которые не являются частью объектной модели CSS страницы (CSSOM), не загружаются браузером, поскольку они не требуются.
  2. Для каждого требуемого шрифта браузер проверяет, доступен ли шрифт локально.
  3. Если шрифт недоступен локально, браузер перебирает внешние определения:
    • Если подсказка формата присутствует, браузер проверяет, поддерживает ли он подсказку, прежде чем начать загрузку. Если браузер не поддерживает подсказку, он переходит к следующему.
    • Если подсказки формата нет, браузер загружает ресурс.

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

Подмножество диапазона Юникода

В дополнение к свойствам шрифта, таким как стиль, толщина и растяжение, правило @font-face позволяет определить набор кодовых точек Юникода, поддерживаемых каждым ресурсом. Это позволяет разделить большой шрифт Unicode на более мелкие подмножества (например, латинский, кириллический и греческий) и загружать только те глифы, которые необходимы для отображения текста на конкретной странице.

Дескриптор unicode-range позволяет указать список значений диапазона, разделенных запятыми, каждое из которых может быть в одной из трех различных форм:

  • Одиночный код (например, U+416 ).
  • Диапазон интервалов (например, U+400-4ff ): указывает начальную и конечную кодовые точки диапазона.
  • Диапазон подстановочных знаков (например, U+4?? ): ? символы обозначают любую шестнадцатеричную цифру

Например, вы можете разделить семейство Awesome Font на латинское и японское подмножества, каждое из которых браузер загружает по мере необходимости:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

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

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

  1. Определите, какие подмножества необходимы:
    • Если браузер поддерживает подмножество диапазона Юникода, он автоматически выберет правильное подмножество. На странице просто необходимо предоставить подмножество файлов и указать соответствующие диапазоны Юникода в правилах @font-face .
    • Если браузер не поддерживает подмножества диапазонов Юникода, страница должна скрыть все ненужные подмножества; то есть разработчик должен указать необходимые подмножества.
  2. Создать подмножества шрифтов:
    • Используйте инструмент pyftsubset с открытым исходным кодом для подмножества и оптимизации ваших шрифтов.
    • Некоторые серверы шрифтов, такие как Google Font, по умолчанию автоматически поднастраиваются.
    • Некоторые службы шрифтов позволяют вручную задавать подмножества с помощью пользовательских параметров запроса, которые вы можете использовать, чтобы вручную указать необходимое подмножество для своей страницы. Обратитесь к документации вашего поставщика шрифтов.

Выбор и синтез шрифта

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

Вес шрифта

На диаграмме выше показано семейство шрифтов, которое предлагает три различных жирности:

  • 400 (обычный).
  • 700 (жирный).
  • 900 (очень жирный).

Все остальные промежуточные варианты (отмечены серым цветом) автоматически сопоставляются браузером с ближайшим вариантом.

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

Алгоритм сопоставления шрифтов CSS

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

В приведенном выше примере объявляется семейство Awesome Font , состоящее из двух ресурсов, которые охватывают один и тот же набор латинских глифов ( U+000-5FF ), но предлагают два разных «веса»: обычный (400) и жирный (700). Однако что произойдет, если одно из ваших правил CSS укажет другую толщину шрифта или установит для свойства font-style значение italic ?

  • Если точное совпадение шрифта недоступно, браузер заменяет наиболее близкий шрифт.
  • Если стилистическое соответствие не найдено (например, в приведенном выше примере не были объявлены варианты курсива), то браузер синтезирует собственный вариант шрифта.
Синтез шрифтов

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

Контрольный список по оптимизации размера веб-шрифта

  • Проверяйте и контролируйте использование шрифтов: не используйте слишком много шрифтов на своих страницах и для каждого шрифта сведите к минимуму количество используемых вариантов. Это помогает обеспечить более единообразную и быструю работу ваших пользователей.
  • По возможности избегайте устаревших форматов: форматы EOT, TTF и WOFF больше, чем WOFF 2.0. EOT и TTF — совершенно ненужные форматы, тогда как WOFF может быть приемлемым, если вам нужна поддержка Internet Explorer 11. Если вы ориентируетесь только на современные браузеры, использование только WOFF 2.0 — самый простой и наиболее эффективный вариант.
  • Подмножество ресурсов шрифтов: многие шрифты могут быть подмножествами или разделены на несколько диапазонов Юникода, чтобы доставлять только те глифы, которые требуются конкретной странице. Это уменьшает размер файла и повышает скорость загрузки ресурса. Однако при определении подмножеств будьте осторожны и оптимизируйте повторное использование шрифтов. Например, не загружайте на каждой странице разные, но пересекающиеся наборы символов. Хорошей практикой является создание подмножества на основе алфавита: например, латиницы и кириллицы.
  • Отдайте приоритет local() в вашем списке src : указание local('Font Name') первым в вашем списке src гарантирует, что HTTP-запросы не будут выполняться для уже установленных шрифтов.
  • Используйте Lighthouse для проверки сжатия текста .

Влияние на наибольшую отрисовку содержимого (LCP) и совокупный сдвиг макета (CLS)

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

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

Если ваши веб-шрифты имеют решающее значение для вашего брендинга — и, как следствие, для взаимодействия с пользователем — рассмотрите возможность предварительной загрузки шрифтов, чтобы браузер имел преимущество при их запросе. Это может сократить как период подкачки, если вы используете font-display: swap , так и период блокировки, если вы не используете font-display .

,

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

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

Анатомия веб-шрифта

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

Таблица глифов шрифта

При выборе шрифта важно учитывать, какие наборы символов поддерживаются. Если вам необходимо локализовать содержимое вашей страницы на несколько языков, вам следует использовать шрифт, который обеспечит единообразный внешний вид и удобство для ваших пользователей. Например, семейство шрифтов Google Noto предназначено для поддержки всех языков мира. Однако обратите внимание, что общий размер Noto со всеми включенными языками составляет более 1,1 ГБ для загрузки ZIP.

В этом посте вы узнаете, как уменьшить размер файла ваших веб-шрифтов.

Форматы веб-шрифтов

Сегодня в Интернете используются два рекомендованных формата контейнеров для шрифтов:

Woff и Woff 2.0 пользуются широкой поддержкой и поддерживаются всеми современными браузерами.

  • Подавайте вариант WOFF 2.0 для современных браузеров.
  • Если это абсолютно необходимо - например, если вам все еще нужно поддержать, например, Internet Explorer 11 - выберите WOFF в качестве запасного.
  • В качестве альтернативы рассмотрите возможность не использовать веб -шрифты для унаследованных браузеров и вернуться к системным шрифтам. Это может быть более эффективным для старых, более ограниченных устройств.
  • Поскольку WOFF и WOFF 2.0 охватывают все базы для современных и устаревших браузеров, все еще используемых, использование EOT и TTF больше не необходимо и может привести к более длительному времени загрузки шрифта.

Веб -шрифты и сжатие

И WOFF, и WOFF 2.0 имеют встроенное сжатие. Внутреннее сжатие WOFF 2.0 использует Brotli и предлагает до 30% лучшего сжатия, чем WOFF. Для получения дополнительной информации см. Отчет по оценке WOFF 2.0 .

Наконец, стоит отметить, что некоторые форматы шрифтов содержат дополнительные метаданные, такие как подсказка для шрифтов и информация о кернинге , которые могут не потребоваться на некоторых платформах, что позволяет обеспечить дальнейшую оптимизацию размера файлов. Например, Google Fonts поддерживает 30+ оптимизированных вариантов для каждого шрифта и автоматически обнаруживает и обеспечивает оптимальный вариант для каждой платформы и браузера.

Определите семью шрифтов с @font-face

@font-face CSS AT-RULE позволяет вам определить местоположение конкретного ресурса FONT, его стиль и кодепоян Unicode, для которых он должен использоваться. Комбинация таких объявлений @font-face может использоваться для построения «семейства шрифтов», которую браузер будет использовать для оценки того, какие ресурсы шрифтов необходимо загрузить и применять на текущей странице.

Рассмотрим переменный шрифт

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

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

Выберите правильный формат

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

Во -первых, обратите внимание, что приведенные выше примеры определяют одно удивительное семейство шрифтов с двумя стилями (нормальным и курсивом ), каждый из которых указывает на другой набор ресурсов шрифтов. В свою очередь, каждый дескриптор src содержит приоритетный, разделенный запятой список вариантов ресурсов:

  • Директива local() позволяет ссылаться на загрузку, загружать и использовать локально установленные шрифты. Если пользователь уже установил шрифт на свою систему, он полностью обходит сеть и является самым быстрым.
  • Директива url() позволяет загружать внешние шрифты, и ей разрешено содержать дополнительную format() , указывающий на формат шрифта, на который ссылается предоставленный URL.

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

  1. Браузер выполняет макет страницы и определяет, какие варианты шрифта необходимы для отображения указанного текста на странице. Шрифты, которые не являются частью объектной модели CSS страницы (CSSOM), не загружаются браузером, поскольку они не требуются.
  2. Для каждого необходимого шрифта браузер проверяет, если шрифт доступен локально.
  3. Если шрифт недоступен локально, браузер итерации по внешним определениям:
    • Если присутствует подсказка в формате, браузер проверяет, поддерживает ли он подсказку перед началом загрузки. Если браузер не поддерживает подсказку, браузер продвигается к следующему.
    • Если намека на формат не присутствует, браузер загружает ресурс.

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

Подмножество Unicode-Range

В дополнение к свойствам шрифтов, таким как стиль, вес и растяжение, правило @font-face позволяет определить набор кодепоинтов Unicode, поддерживаемых каждым ресурсом. Это позволяет вам разделить большой шрифт Unicode на более мелкие подмножества (например, латинские, кириллические и греческие подмножества) и загружать только глифы, необходимые для отображения текста на определенной странице.

Дескриптор unicode-range позволяет вам указать список значений диапазона, каждый из которых может быть в одной из трех различных форм:

  • Single CodePoint (например, U+416 )
  • Диапазон интервалов (например, U+400-4ff ): указывает на начало и конечные кодепоинаты диапазона
  • Диапазон подстановочных знаков (например, U+4?? ) : ? персонажи указывают на любую шестнадцатеричную цифру

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

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

Почти все браузеры поддерживают unicode-range . Для совместимости с более старыми браузерами вам может потребоваться вернуться к «ручным подмножеством». В этом случае вы должны вернуться к предоставлению единого ресурса шрифта, который содержит все необходимые подмножества и скрыть остальные из браузера. Например, если страница использует только латинские символы, то вы можете лишить другие глифы и служить этому конкретному подмножеству в качестве отдельного ресурса.

  1. Определите, какие подмножества нужны:
    • Если браузер поддерживает подмножество Unicode-range, то он автоматически выберет правое подмножество. На странице просто необходимо предоставить подмножество файлов и указать соответствующие диапазоны Unicode в правилах @font-face .
    • Если браузер не поддерживает подмножество Unicode-range, то странице необходимо скрыть все ненужные подмножества; То есть разработчик должен указать требуемые подмножества.
  2. Генерировать подмножества шрифтов:
    • Используйте инструмент PyftsubSet с открытым исходным кодом, чтобы подмножить и оптимизировать свои шрифты.
    • Некоторые серверы шрифтов, такие как шрифт Google, будут автоматически подмножаться по умолчанию.
    • Некоторые службы шрифтов разрешают ручное подмножество с помощью пользовательских параметров запроса, которые вы можете использовать для вручную указать необходимое подмножество для вашей страницы. Проконсультируйтесь с документацией от вашего поставщика шрифтов.

Выбор шрифта и синтез

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

Вес шрифта

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

  • 400 (обычный).
  • 700 (жирный).
  • 900 (лишний жирный жирный).

Все остальные промежуточные варианты (обозначенные в сером) автоматически отображаются с ближайшим вариантом браузером.

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

Алгоритм сопоставления шрифтов CSS

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

Приведенный выше пример заявляет об удивительном семействе шрифтов , состоит из двух ресурсов, которые охватывают один и тот же набор латинских глифов ( U+000-5FF ), но предлагают два разных «веса»: нормальный (400) и жирный жирный (700). Тем не менее, что произойдет, если одно из ваших правил CSS определяет другой вес шрифта или устанавливает свойство font-style на italic ?

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

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

Контрольный список оптимизации размера веб -шрифта

  • Аудит и контролируйте использование шрифта: не используйте слишком много шрифтов на ваших страницах, и, для каждого шрифта, минимизируйте количество использованных вариантов. Это помогает создать более последовательный и более быстрый опыт для ваших пользователей.
  • Избегайте устаревших форматов, если это возможно: форматы EOT, TTF и WOFF больше, чем WOFF 2.0. EOT и TTF являются строго ненужными форматами, где WOFF может быть приемлемым, если вам нужно поддержать Internet Explorer 11. Если вы нацелены только на современные браузеры, использование WOFF 2.0 является самым простым и наиболее эффективным вариантом.
  • Подмножество ваших ресурсов шрифта: многие шрифты могут быть подмножества или разделены на несколько юникодных диапазонов, чтобы доставить только глифы, которые требуют конкретной страницы. Это уменьшает размер файла и улучшает скорость загрузки ресурса. Однако при определении подмножеств, будьте осторожны с оптимизацией для повторного использования шрифтов. Например, не загружайте другой, но перекрывающий набор символов на каждой странице. Хорошей практикой является подмножество на основе сценария: например, латинский и кирилли.
  • Дайте приоритет local() в вашем списке src : перечисление local('Font Name') сначала в вашем списке src гарантирует, что HTTP -запросы не сделаны для шрифтов, которые уже установлены.
  • Используйте маяк , чтобы проверить сжатие текста .

Влияние на самую большую довольную краску (LCP) и кумулятивную сдвиг макета (CLS)

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

Если вы обеспокоены тем, что, несмотря на ваши усилия по оптимизации, текст страницы может занять слишком много времени, чтобы появиться из-за большого ресурса веб-шрифта, свойство font-display имеет ряд настройки, которые могут помочь вам избежать невидимого текста , пока шрифт загружается . Тем не менее, использование значения swap может привести к значительным сдвигам макета, которые влияют на совокупный сдвиг вашего сайта (CLS) . Рассмотрите возможность использования optional или fallback значений, если это возможно.

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

,

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

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

Анатомия веб -шрифта

Веб -шрифт представляет собой коллекцию глифов, и каждый глиф является векторной формой, которая описывает букву или символ. В результате две простые переменные определяют размер конкретного файла шрифта: сложность векторных путей каждого глифа и количество глифов в определенном шрифте. Например, Open Sans, который является одним из самых популярных веб -салонов, содержит 897 глифов, которые включают в себя латинские, греческие и кириллические персонажи.

Стол глиф шрифта

При выборе шрифта важно рассмотреть, какие наборы символов поддерживаются. Если вам нужно локализовать контент вашей страницы на нескольких языках, вам следует использовать шрифт, который может предоставить для ваших пользователей постоянный внешний вид и опыт. Например, семья Google Noto Font стремится поддержать все языки мира. Обратите внимание, однако, что общий размер Noto со всеми языками приводит к загрузке 1,1 ГБ+ ZIP.

В этом посте вы узнаете, как уменьшить поставленное размещение файлов ваших веб -шрифтов.

Форматы веб -шрифтов

Сегодня в Интернете используются два рекомендованных формата контейнеров для шрифтов:

Woff и Woff 2.0 пользуются широкой поддержкой и поддерживаются всеми современными браузерами.

  • Подавайте вариант WOFF 2.0 для современных браузеров.
  • Если это абсолютно необходимо - например, если вам все еще нужно поддержать, например, Internet Explorer 11 - выберите WOFF в качестве запасного.
  • В качестве альтернативы рассмотрите возможность не использовать веб -шрифты для унаследованных браузеров и вернуться к системным шрифтам. Это может быть более эффективным для старых, более ограниченных устройств.
  • Поскольку WOFF и WOFF 2.0 охватывают все базы для современных и устаревших браузеров, все еще используемых, использование EOT и TTF больше не необходимо и может привести к более длительному времени загрузки шрифта.

Веб -шрифты и сжатие

И WOFF, и WOFF 2.0 имеют встроенное сжатие. Внутреннее сжатие WOFF 2.0 использует Brotli и предлагает до 30% лучшего сжатия, чем WOFF. Для получения дополнительной информации см. Отчет по оценке WOFF 2.0 .

Наконец, стоит отметить, что некоторые форматы шрифтов содержат дополнительные метаданные, такие как подсказка для шрифтов и информация о кернинге , которые могут не потребоваться на некоторых платформах, что позволяет обеспечить дальнейшую оптимизацию размера файлов. Например, Google Fonts поддерживает 30+ оптимизированных вариантов для каждого шрифта и автоматически обнаруживает и обеспечивает оптимальный вариант для каждой платформы и браузера.

Определите семью шрифтов с @font-face

@font-face CSS AT-RULE позволяет вам определить местоположение конкретного ресурса FONT, его стиль и кодепоян Unicode, для которых он должен использоваться. Комбинация таких объявлений @font-face может использоваться для построения «семейства шрифтов», которую браузер будет использовать для оценки того, какие ресурсы шрифтов необходимо загрузить и применять на текущей странице.

Рассмотрим переменный шрифт

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

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

Выберите правильный формат

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

Во -первых, обратите внимание, что приведенные выше примеры определяют одно удивительное семейство шрифтов с двумя стилями (нормальным и курсивом ), каждый из которых указывает на другой набор ресурсов шрифтов. В свою очередь, каждый дескриптор src содержит приоритетный, разделенный запятой список вариантов ресурсов:

  • Директива local() позволяет ссылаться на загрузку, загружать и использовать локально установленные шрифты. Если пользователь уже установил шрифт на свою систему, он полностью обходит сеть и является самым быстрым.
  • Директива url() позволяет загружать внешние шрифты, и ей разрешено содержать дополнительную format() , указывающий на формат шрифта, на который ссылается предоставленный URL.

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

  1. Браузер выполняет макет страницы и определяет, какие варианты шрифта необходимы для отображения указанного текста на странице. Шрифты, которые не являются частью объектной модели CSS страницы (CSSOM), не загружаются браузером, поскольку они не требуются.
  2. Для каждого необходимого шрифта браузер проверяет, если шрифт доступен локально.
  3. Если шрифт недоступен локально, браузер итерации по внешним определениям:
    • Если присутствует подсказка в формате, браузер проверяет, поддерживает ли он подсказку перед началом загрузки. Если браузер не поддерживает подсказку, браузер продвигается к следующему.
    • Если намека на формат не присутствует, браузер загружает ресурс.

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

Подмножество Unicode-Range

В дополнение к свойствам шрифтов, таким как стиль, вес и растяжение, правило @font-face позволяет определить набор кодепоинтов Unicode, поддерживаемых каждым ресурсом. Это позволяет вам разделить большой шрифт Unicode на более мелкие подмножества (например, латинские, кириллические и греческие подмножества) и загружать только глифы, необходимые для отображения текста на определенной странице.

Дескриптор unicode-range позволяет вам указать список значений диапазона, каждый из которых может быть в одной из трех различных форм:

  • Single CodePoint (например, U+416 )
  • Диапазон интервалов (например, U+400-4ff ): указывает на начало и конечные кодепоинаты диапазона
  • Диапазон подстановочных знаков (например, U+4?? ) : ? персонажи указывают на любую шестнадцатеричную цифру

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

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

Почти все браузеры поддерживают unicode-range . Для совместимости с более старыми браузерами вам может потребоваться вернуться к «ручным подмножеством». В этом случае вы должны вернуться к предоставлению единого ресурса шрифта, который содержит все необходимые подмножества и скрыть остальные из браузера. Например, если страница использует только латинские символы, то вы можете лишить другие глифы и служить этому конкретному подмножеству в качестве отдельного ресурса.

  1. Определите, какие подмножества нужны:
    • Если браузер поддерживает подмножество Unicode-range, то он автоматически выберет правое подмножество. На странице просто необходимо предоставить подмножество файлов и указать соответствующие диапазоны Unicode в правилах @font-face .
    • Если браузер не поддерживает подмножество Unicode-range, то странице необходимо скрыть все ненужные подмножества; То есть разработчик должен указать требуемые подмножества.
  2. Генерировать подмножества шрифтов:
    • Используйте инструмент PyftsubSet с открытым исходным кодом, чтобы подмножить и оптимизировать свои шрифты.
    • Некоторые серверы шрифтов, такие как шрифт Google, будут автоматически подмножаться по умолчанию.
    • Некоторые службы шрифтов разрешают ручное подмножество с помощью пользовательских параметров запроса, которые вы можете использовать для вручную указать необходимое подмножество для вашей страницы. Проконсультируйтесь с документацией от вашего поставщика шрифтов.

Выбор шрифта и синтез

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

Вес шрифта

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

  • 400 (обычный).
  • 700 (жирный).
  • 900 (лишний жирный жирный).

Все остальные промежуточные варианты (обозначенные в сером) автоматически отображаются с ближайшим вариантом браузером.

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

Алгоритм сопоставления шрифтов CSS

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

Приведенный выше пример заявляет об удивительном семействе шрифтов , состоит из двух ресурсов, которые охватывают один и тот же набор латинских глифов ( U+000-5FF ), но предлагают два разных «веса»: нормальный (400) и жирный жирный (700). Тем не менее, что произойдет, если одно из ваших правил CSS определяет другой вес шрифта или устанавливает свойство font-style на italic ?

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

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

Контрольный список оптимизации размера веб -шрифта

  • Аудит и контролируйте использование шрифта: не используйте слишком много шрифтов на ваших страницах, и, для каждого шрифта, минимизируйте количество использованных вариантов. Это помогает создать более последовательный и более быстрый опыт для ваших пользователей.
  • Избегайте устаревших форматов, если это возможно: форматы EOT, TTF и WOFF больше, чем WOFF 2.0. EOT и TTF являются строго ненужными форматами, где WOFF может быть приемлемым, если вам нужно поддержать Internet Explorer 11. Если вы нацелены только на современные браузеры, использование WOFF 2.0 является самым простым и наиболее эффективным вариантом.
  • Подмножество ваших ресурсов шрифта: многие шрифты могут быть подмножества или разделены на несколько юникодных диапазонов, чтобы доставить только глифы, которые требуют конкретной страницы. Это уменьшает размер файла и улучшает скорость загрузки ресурса. Однако при определении подмножеств, будьте осторожны с оптимизацией для повторного использования шрифтов. Например, не загружайте другой, но перекрывающий набор символов на каждой странице. Хорошей практикой является подмножество на основе сценария: например, латинский и кирилли.
  • Дайте приоритет local() в вашем списке src : перечисление local('Font Name') сначала в вашем списке src гарантирует, что HTTP -запросы не сделаны для шрифтов, которые уже установлены.
  • Используйте маяк , чтобы проверить сжатие текста .

Влияние на самую большую довольную краску (LCP) и кумулятивную сдвиг макета (CLS)

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

Если вы обеспокоены тем, что, несмотря на ваши усилия по оптимизации, текст страницы может занять слишком много времени, чтобы появиться из-за большого ресурса веб-шрифта, свойство font-display имеет ряд настройки, которые могут помочь вам избежать невидимого текста , пока шрифт загружается . Тем не менее, использование значения swap может привести к значительным сдвигам макета, которые влияют на совокупный сдвиг вашего сайта (CLS) . Рассмотрите возможность использования optional или fallback значений, если это возможно.

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