API шрифтов Google
Новый API для запроса шрифтов позволяет выбрать любой из постоянно растущего числа вариативных шрифтов в каталоге Google Fonts. Синтаксис довольно гибкий и позволяет вам вызывать определенную комбинацию осей, статических значений и диапазонов. Поскольку сайт документации для разработчиков Google Fonts настолько всеобъемлющий, здесь основное внимание будет уделено работе с переменными осями шрифта и комбинациями диапазонов, чтобы у вас была максимальная гибкость при разработке вашего проекта.
Выполнение запроса
После выбора переменного шрифта для использования через API обратите особое внимание на изменения в синтаксисе с версии 1 на версию 2. Запрос Yanone Kaffeesatz в качестве вариативного шрифта с диапазоном весов по оси 200–700 выглядит следующим образом:
Разберем части запроса:
css2?family=[font name]:[axis keyword]@[range (low)]..[range (high)]
Во-первых, обратите внимание, что хотя конечная точка адреса — css2, указание имени шрифта практически не изменилось по сравнению с предыдущей версией API. После двоеточия все меняется более резко. Здесь перечислены ось или оси, за которыми следует символ @, за которым следуют значения, указывающие запрошенные диапазоны. API позволяет указать отдельные значения, но здесь запрос использует синтаксис «[диапазон (низкий)]..[диапазон (высокий)]» для запроса полного диапазона веса от 200 до 700. Если вам требуется только вес чтобы покрыть часть доступного диапазона, вы можете соответствующим образом настроить значения и получить немного меньшую загрузку.
После запроса вы можете указать любое значение в этом диапазоне в своем CSS. В случае оси веса это соответствует стандартному font-weightатрибуту.
Курсив можно заказать отдельно с соответствующим диапазоном весовой оси или в виде комбинации (если доступно) как вертикального, так и курсивного начертания в полном запрошенном диапазоне.
Просто курсив с весом от 200 до 900:
Или как прямое, так и курсивное начертание в одном диапазоне:
В документации есть подробные примечания по синтаксису , но вот пара моментов, которые нужно помнить:
- Держите оси в алфавитном порядке
- Сохраняйте соответствующие наборы значений в числовом порядке
p {
font-weight: 350;
}
strong {
font-weight: 575;
}
Диапазон по сравнению со статической точкой
Эта версия API может обслуживать как статические, так и вариативные шрифты, а также статические экземпляры вариативных шрифтов. Другими словами, одна и та же структура URL-адреса может извлекать статические шрифты, диапазон переменных шрифтов или экземпляр переменного шрифта по одному конкретному значению. Хотя в некоторых случаях может быть полезно запросить, скажем, только 575-й вес данного шрифта, реальные преимущества использования вариативных шрифтов часто заключаются в использовании большего количества доступного диапазона, поэтому это и находится в центре внимания большинства демонстраций. на этом сайте.
Crimson Pro, статика, нормальный вес:
Crimson Pro, переменная, удельный вес:
Crimson Pro, регулируемый, полный диапазон веса:
Первый приведенный выше пример наиболее близок к синтаксису, который ранее поддерживался в API. Второй пример включает wghtключевое слово с определенным весом, указанное после знака @, что указывает на статический экземпляр из переменного шрифта. Третий пример — это запрос полного диапазона веса вариативного шрифта.
Самостоятельное размещение вариативных шрифтов
Размещение вариативных шрифтов на вашем сайте не сильно отличается от размещения стандартных, но есть несколько ключевых частей, которые необходимо включить, чтобы они работали наилучшим образом. Несмотря на то, что было несколько итераций спецификации, в этих примерах будет показана самая последняя и полная реализация для обеспечения самой широкой совместимости.
В примере кода показано, как @font-faceправила будут выглядеть в вашем CSS.
Итак, первая часть, которую вы заметите, это источник. Поскольку спецификация CSS развивается , включение обеих подсказок по формату гарантирует, что она будет работать сейчас и в будущем, как только полная спецификация будет поддерживаться в браузерах. Первый синтаксис ( woff2 supports variations) является более современным из двух, так как также будут использоваться цветные шрифты, поэтому должен быть способ указать комбинации функций. Второй ( woff2-variations) — это поддерживаемый в настоящее время синтаксис во всех поддерживающих браузерах. По мере развития поддержки новый синтаксис будет применяться без ущерба для поддержки старых браузеров.
Далее вы заметите линии, которые показывают диапазоны для font-stretch, font-styleи font-weight. Они помогают информировать браузер о том, как должен вести себя шрифт, и дают некоторое представление о том, какие значения CSS допустимы для этого шрифта.
@font-face {
font-family: Roboto Extremo;
src:
url('..path/to/fonts/roboto_extremo.woff2')
format(‘woff2 supports variations’),
url('..path/to/fonts/roboto_extremo.woff2')
format('woff2-variations');
font-stretch: 25% 150%;
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-display: swap;
}
Растяжка шрифта
Он предоставляется в виде двух процентных значений: сначала низкий, затем высокий. Некоторые шрифты имеют диапазоны, не соответствующие спецификации (которая требует, чтобы 100% была «нормальной» шириной), но даже если диапазон составляет 3–5 или 60–220, их все равно необходимо здесь выражено в процентах.
font-stretch: [low]% [high]%;
Стиль шрифта
В настоящее время font-styleследует указывать только для вариативных шрифтов в двух сценариях: если вы загружаете файл шрифта, который содержит только курсив (например, при загрузке файлов вертикального и курсивного шрифтов и группировки их с одним и тем же именем семейства), или если ваш вариативный шрифт содержит наклонная ось, но не курсивная.
Если вы загружаете файл шрифта только для курсива:
font-style: italic;
Если вы загружаете файл шрифта с наклонной осью, вы должны указать низкие и высокие значения степени:
font-style: oblique 0deg 10deg;
Примечание. Из-за некоторых несоответствий в том, как браузеры обрабатывают файлы переменных шрифтов, содержащие как курсив, так и прямой вариант (а также файлы, содержащие как курсив, так и наклонную ось), в этих сценариях лучше font-styleполностью опустить строку.
Вес шрифта
Это также предоставляется как низкие и высокие значения:
font-weight: 100 1000;
Отображение шрифтов
Хотя font-displayэто и не требуется, рекомендуется включать его, чтобы отображать контент на экране как можно быстрее.
Почему это важно
Важно предоставить эти значения, чтобы браузер мог принимать более разумные решения о том, как отображать шрифт, когда значения CSS выходят за пределы диапазона или полностью опущены. Если нижнее значение для font-weightравно 300, но CSS требует font-weight: 100, браузер будет знать, что следует зажать наименьшее допустимое число (в данном случае 300), избегая синтезированного результата.
Как только вы объявите @font-faceправила, вы можете приступить к указанию font-familyатрибутов и точно так же, как если бы вы использовали API или любой другой метод загрузки шрифтов.
Переменные шрифты в пользовательском интерфейсе Google Fonts
Поиск вариативных шрифтов
Теперь вы можете найти вариативные шрифты прямо в самом интерфейсе Google Fonts. Флажок в интерфейсе поиска позволяет «показывать в результатах только вариативные шрифты». Отметка в этом поле — самый быстрый способ просмотреть, что доступно для настройки.
Когда вы выбираете одно из семейств с меткой «Переменная» в правом верхнем углу, вы найдете версию переменной в нижней части списка стилей.
Индивидуальные стили
Чтобы создать собственный стиль, просто переместите ползунок на нужное значение (показано выше) и выполните те же действия, что и с любым другим шрифтом.
Этот процесс дает вам код для встраивания для одного экземпляра (например, с размером шрифта 284) или для нескольких статических экземпляров, если вы выберете более одного. Для включения всего диапазона требуется лишь небольшое изменение кода.
Код для встраивания Освальда со статическим весом будет выглядеть так:
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@284&display=swap" rel="stylesheet">
Некоторые семейства имеют диапазон значений веса, выходящий за рамки традиционного диапазона 9 отдельных шрифтов от 100 до 900. Например, вот минимальный вес Hepta Slab, значение веса шрифта равное 1! Это новый. Как дизайнер, вам нужно обращаться с ним осторожно, потому что, хотя он выглядит фантастически в больших размерах на экранах с высоким разрешением, он может стать очень бледным или даже полностью исчезнуть на устройствах с низким разрешением при меньшем размере шрифта.
<link href="https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1&display=swap" rel="stylesheet"> <span style="font-family: 'Hepta Slab', serif; font-weight: 1">
Гибкие диапазоны стилей
Если вы посмотрите на детали ползунка переменного стиля, вы увидите, что вы можете перемещать ползунок в каждый конец диапазона, чтобы обнаружить минимальное и максимальное значения семейства (в данном случае 200 и 700). Замена одного значения «674» синтаксисом диапазона «..» для этого семейства («200..700») дает вам мгновенный доступ ко всему диапазону:
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
Конечно, не во всех проектах можно использовать весь диапазон стилей, но реальная ценность вариативных шрифтов заключается в возможности расширить диапазон вашего дизайна при одновременном уменьшении объема передаваемых данных шрифта. В этом случае вы получите весь диапазон от 200 до 700 весов за эквивалент 2 или 3 отдельных стилей — за одну загрузку 25 КБ!
Дополнительные оси
У технологии вариативных шрифтов есть 3 основных преимущества: сжатие, выразительность и утонченность. Они имеют тенденцию реализовываться именно в таком порядке.
Google Fonts API предоставляет конечным пользователям преимущества сжатия для нескольких семейств (таких как Oswald и Comfortaa) с начала 2019 года; если на странице используется 2 или более стилей, а у пользователя есть браузер, полностью поддерживающий вариативные шрифты, то для всех весов предоставляется один URL-адрес файла вариативного шрифта, при этом старые браузеры продолжают обслуживать несколько файлов для каждого стиля.
Все это произошло полностью за кулисами, без каких-либо изменений пользовательского интерфейса. Теперь, когда у Google Fonts есть пользовательский интерфейс для выбора пользовательского веса, вы можете легко использовать именно тот вес, который вам нужен, и столько, сколько хотите, при этом пожиная плоды сжатия.
Но вариативные шрифты — это нечто большее, чем просто сжатие. Другие оси либо предлагают более выразительные варианты отображения типографики, либо больше способов тонкой настройки типографики текста. Сначала они станут доступны за кулисами в API и будут описаны в описаниях «Об этом шрифте» на страницах образцов и в документации по API . Информация, доступная на этом сайте, наряду с дополнительными ресурсами, дает вам совершенно новые возможности для расширения вашего дизайнерского словаря.
Это подчеркивает некоторые способы использования вариативных шрифтов для улучшения доступности и удобства чтения для большего числа пользователей, в большем количестве контекстов, на большем количестве устройств. Каждый аспект сам по себе может быть незначительным, но вместе взятые, все эти факторы значительно улучшают опыт в целом.
Прогрессивное улучшение и поддержка устаревших браузеров
Для поддержки самого широкого набора браузеров и устройств важно сначала настроить свой CSS со стандартными значениями и переменными стилями внутри @supportsблока. Если вы используете Google Fonts API, у нас хорошие новости: этот API достаточно умен, чтобы предоставлять статические файлы шрифтов, если браузер не поддерживает переменные , поэтому все, что вам нужно сделать, это управлять частью уравнения CSS. Если вы сами размещаете шрифты, вам просто нужно добавить ссылку на семейство переменных шрифтов внутри @supportsблока.
Добавление в font-synthesis: noneобъявление не позволяет браузерам, таким как Safari или Firefox, искусственно выделять шрифт жирным шрифтом или курсивом, что может привести к неожиданным и далеко не идеальным результатам.
p {
font-synthesis: none;
font-weight: normal;
}
strong {
font-synthesis: none;
font-weight: bold;
}
@supports (font-variation-settings: normal) {
p {
font-weight: 350;
}
strong {
font-weight: 575;
}
}
Производительность
Независимо от того, размещаете ли вы шрифты сами или используете службу Google Fonts, есть шаги, которые вы можете предпринять, чтобы гарантировать наилучшую возможную производительность на вашем сайте. Это помогает немного понять процесс загрузки и рендеринга. Основной поток выглядит примерно так:
- Браузер запрашивает страницу
- Браузер загружает HTML и связанный CSS
- Браузер анализирует HTML и CSS
- Браузер инициирует загрузку любых связанных ресурсов CSS (например, шрифтов).
- Браузер теперь ждет до 3 секунд, прежде чем начать рендеринг страницы, ожидая загрузки веб-шрифтов.
- Если шрифты прибывают в течение 3 секунд, страница отображается так, как должна быть.
- Если шрифты загружены не полностью, браузер отображает страницу с использованием резервных системных шрифтов, повторно отображая страницу после прибытия веб-шрифтов.
В идеале шрифты загружаются быстро и страница отображается правильно с первого раза, но часто это не так, что приводит нас к следующему сценарию. Феномен рендеринга текста в резервных шрифтах, а затем повторного рендеринга с правильными шрифтами известен как Flash of Unstyled Text (FOUT).
Учитывая, что цель любого сайта, как правило, состоит в доставке контента, FOUT следует предпочесть и даже ускорить, если это возможно. Введение задержки не менее 3 секунд значительно увеличивает вероятность того, что пользователи вообще откажутся от процесса и перейдут в другое место. W3C фактически предоставил возможность сообщать браузеру, как вести себя в этом сценарии, и служба Google Fonts и API теперь также поддерживают это.
Это происходит в форме атрибута, называемого font-display. Предоставляя значение swap, мы указываем браузеру немедленно отображать страницу с резервными шрифтами, а затем перерисовывать страницу после загрузки шрифтов. Однако это только часть решения. Следующим шагом является включение загрузчика веб-шрифтов, который позволяет стилизовать резервные шрифты в процессе загрузки. Это помогает свести к минимуму любую перекомпоновку содержимого после того, как браузер повторно отобразит страницу после завершения загрузки веб-шрифтов. Это требует некоторого JavaScript, но это действительно стоящее улучшение пользовательского опыта.
Первая часть этого решения проста: просто добавьте &display=swapк запросу API. Один из приведенных выше запросов для Crimson Pro будет выглядеть следующим образом:
Вы можете узнать больше о том , что font-displayон делает и какие возможности он предоставляет, на странице спецификаций W3C и на сайте MDN Web Docs .
Чтобы продвинуть ваше решение дальше, взгляните на FontFaceObserver Брэма Штейна или узнайте больше о производительности загрузки шрифтов в целом в этом посте Зака Лезермана .