Как использовать CSS API Google Fonts для эффективной доставки веб-шрифтов.
За прошедшие годы многое изменилось в технологии веб-шрифтов . То, что раньше было нишевой практикой, требующей изображения текста или плагина Flash (и это ставило под угрозу поисковую оптимизацию вашего веб-сайта), теперь является стандартной практикой во всей сети. Когда-то вам приходилось загружать весь шрифт перед загрузкой страницы — со стилями и символами, которые вы, возможно, даже не использовали — но даже это ушло в прошлое.
CSS API Google Fonts также развивался с годами, чтобы идти в ногу с изменениями в технологии веб-шрифтов. Он прошел долгий путь от своего первоначального предложения — сделать Интернет быстрее, позволив вашему браузеру кэшировать часто используемые шрифты на всех веб-сайтах, использующих API. Это уже не так , но API по-прежнему предоставляет дополнительные и важные оптимизации, чтобы веб-сайты загружались быстро и шрифты работали хорошо.
Используя API Google Fonts CSS, ваш веб-сайт может запрашивать только те данные шрифта, которые ему необходимы, чтобы свести к минимуму время загрузки CSS, гарантируя, что посетители вашего сайта смогут загружать ваш контент как можно быстрее. API будет отвечать на каждый запрос лучшим шрифтом для этого веб-браузера.
Все это происходит путем включения в ваш код одной строки HTML.
Как использовать CSS API Google Fonts
Документация Google Fonts CSS API прекрасно это описывает:
Вам не нужно заниматься программированием; все, что вам нужно сделать, это добавить специальную ссылку на таблицу стилей в ваш HTML-документ, а затем обратиться к шрифту в стиле CSS.
Минимум, что вам нужно сделать, это включить одну строку в ваш HTML, например:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
Когда вы запрашиваете шрифт через API, вы указываете, какое семейство или семейства вам нужны, а также, при необходимости, их толщину, стили, подмножества и многие другие параметры . Затем API обработает ваш запрос одним из двух способов:
- Если ваш запрос использует общие параметры, для которых API уже имеет файлы, он немедленно вернет CSS вашему пользователю, направив его к этим файлам.
- Если вы запросили шрифт с параметрами, которые API в настоящее время не кэширует, он на лету подберет подмножества ваших шрифтов, используя HarfBuzz , чтобы сделать это быстро, и вернет CSS, указывающий на них.
Файлы шрифтов могут быть большими, но это не обязательно.
Веб-шрифты могут быть большими; это правда. Вес одного только японского Noto Sans в WOFF2 составляет почти 3,4 МБ, и его загрузка каждому из ваших пользователей приведет к увеличению времени загрузки вашей страницы. Когда каждая миллисекунда имеет значение и каждый байт ценен, вы хотите быть уверены, что загружаете только те данные, которые нужны вашим пользователям.
CSS API Google Fonts может создавать очень маленькие файлы шрифтов (называемые подмножествами), генерируемые в реальном времени, чтобы предоставлять вашим пользователям только текст и стили, необходимые вашему веб-сайту. Вместо использования всего шрифта вы можете запросить определенные символы, используя text параметр.
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />
CSS API также автоматически предоставляет вашим пользователям дополнительную оптимизацию веб-шрифтов без каких-либо параметров API. API будет предоставлять вашим пользователям CSS-файлы с уже включенным unicode-range ( если поддерживается их веб-браузером ), поэтому они загружают шрифты только для тех символов, которые нужны вашему веб-сайту.
Дескриптор CSS в диапазоне Юникода — это один из инструментов, который теперь можно использовать для борьбы с загрузкой больших шрифтов. Это свойство CSS устанавливает диапазон символов Юникода, которые содержит объявление @font-face . Если один из этих символов отображается на странице, этот шрифт загружается. Это хорошо работает для всех типов языков, поэтому вы можете взять шрифт, включающий латинские, греческие или кириллические символы, и создать меньшие подмножества. На предыдущей диаграмме вы можете видеть, что если бы вам пришлось загрузить все три набора символов, это было бы более 600 глифов.
Это также позволяет использовать в Интернете китайские, японские и корейские (CJK) шрифты . На предыдущей диаграмме вы можете видеть, что шрифт CJK охватывает в 15-20 раз больше символов, чем шрифт латинского алфавита. Эти шрифты обычно очень большие, и многие символы этих языков используются не так часто, как другие.
Использование CSS API и unicode-range может сократить передачу файлов примерно на 90% . Используя дескриптор unicode-range , вы можете определить каждую часть отдельно, и каждый фрагмент загружается только в том случае, если ваш контент содержит один из символов в этих диапазонах символов.
Пример: если вы хотите установить только слово «こんにちは» в Noto Sans JP , вы можете:
- Размещайте собственные файлы WOFF2 самостоятельно.
- Используйте CSS API для получения файла WOFF2.
- Используйте CSS API с параметром text=, установленным на «こんにちは».
В этом примере вы можете видеть, что, используя API CSS, вы уже экономите 97,5 % по сравнению с размещением шрифта WOFF2 на собственном хостинге благодаря встроенной поддержке API для разделения больших шрифтов на диапазон Юникода. Сделав еще один шаг вперед и указав именно текст, который вы хотите отображать, вы можете еще больше уменьшить размер шрифта до 95,3% от размера шрифта CSS API — это на 99,9% меньше, чем у самостоятельного шрифта.
CSS API Google Fonts автоматически доставляет шрифты в наименьшем и наиболее совместимом формате, поддерживаемом браузером вашего пользователя. Если ваш пользователь использует браузер с поддержкой WOFF2, API предоставит шрифты в WOFF2, но если он использует более старый браузер, API предоставит шрифты в формате, поддерживаемом этим браузером. Чтобы уменьшить размер файла для каждого пользователя, API также удаляет данные из шрифтов, когда они не нужны. Например, данные хинтинга будут удалены для пользователей, браузерам которых они не нужны.
Обеспечьте безопасность своих веб-шрифтов в будущем с помощью CSS API Google Fonts
Команда Google Fonts также вносит свой вклад в разработку новых стандартов W3C, которые продолжают внедрять инновационные технологии веб-шрифтов, такие как WOFF2 . Одним из текущих проектов является Incremental Font Transfer , который позволяет пользователям загружать очень небольшие части файлов шрифтов по мере их использования на экране и передавать остальные по требованию, превосходя производительность диапазона Unicode. Когда вы используете наш API веб-шрифтов, ваши пользователи получают эти базовые улучшения технологии передачи шрифтов, когда они становятся доступными в их браузере.
В этом прелесть API шрифтов: ваши пользователи получают выгоду от каждого нового усовершенствования технологии без каких-либо изменений на вашем веб-сайте. Новый формат веб-шрифта? Без проблем. Поддержка нового браузера или операционной системы? Об этом позаботились. Таким образом, вместо того, чтобы увязнуть в обслуживании своих веб-шрифтов, вы можете сосредоточиться на своих пользователях и своем контенте.
Переменные шрифты поддерживают встроенную
Переменные шрифты — это файлы шрифтов, которые могут хранить различные варианты дизайна по нескольким осям . Новая версия CSS API Google Fonts включает их поддержку. Добавление дополнительной оси вариаций обеспечивает новую гибкость шрифта, но позволяет увеличить размер файла шрифта почти вдвое.
Если вы уточните запрос CSS API, CSS API Google Fonts может обслуживать только ту часть переменного шрифта, которая необходима вашему веб-сайту, чтобы уменьшить размер загрузки для пользователей. Это позволяет использовать переменные шрифты для Интернета без длительной загрузки страниц. Это можно сделать, указав одно значение на оси или указав диапазон; вы даже можете указать несколько осей и несколько семейств шрифтов в одном запросе. API является гибким и отвечает вашим потребностям.
Простота реализации, оптимизация для вас
CSS API Google Fonts помогает создавать шрифты, которые:
- Более совместим с веб-браузерами.
- Как можно меньше.
- Доставлено быстро.
- Вам проще в использовании.
Для получения дополнительной информации о Google Fonts посетите Fonts.google.com . Чтобы узнать больше о CSS API, ознакомьтесь с документацией по API .
Благодарности
Изображение героя от leesehee .