Переменные шрифты: что это такое и как их использовать

В этой статье мы рассмотрим захватывающие новые возможности, связанные с переменными шрифтами — теперь они связаны с масштабируемым форматом шрифтов OpenType — который позволяет одному шрифту вести себя как несколько шрифтов.

Как мы сюда попали

Когда HTML был создан, шрифты и стили контролировались исключительно настройками каждого веб-браузера. В середине 90-х годов были созданы первые шрифты для экранных носителей: Грузия и Вердана. Они вместе с системными шрифтами — Arial, Times New Roman и Helvetica — были единственными шрифтами, доступными для веб-браузеров (не только единственными, но теми, которые мы могли найти в каждой операционной системе).

С развитием веб-браузеров такие инновации, как <font> в Netscape Navigator и первая спецификация CSS, позволили веб-страницам контролировать, какой шрифт отображался. Однако эти шрифты необходимо было установить на компьютер пользователя.

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

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

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

До появления модуля шрифтов CSS3 в 2012 году загрузка шрифтов стала жизнеспособной. После внедрения шрифт, загруженный веб-страницей, может использоваться только на этой странице и не копироваться в операционную систему. Загрузка шрифтов позволила браузеру загружать и использовать удаленные шрифты, а это означает, что веб-дизайнеры теперь могут использовать шрифты, которые не были установлены на компьютере пользователя. Когда веб-дизайнеры нашли шрифт, который они хотели бы использовать, им просто нужно было включить файл шрифта на веб-сервер, и он будет автоматически загружен пользователю при необходимости. На эти шрифты ссылались, используя правило @font-face .

Чтобы использовать правило @font-face мы должны определить имя шрифта и указать на файл шрифта:

 @font-face { font-family: Avenir Next Variable; src: url(AvenirNext_Variable.woff); } 

Файл шрифта может быть одного из пяти различных форматов: TTF, WOFF, WOFF2, SVG или EOT. У каждого есть свои преимущества и недостатки . Проще говоря, EOT был создан Microsoft и поддерживается только Internet Explorer. TTF — это основной тип шрифта, созданный Microsoft и Apple, и он работает практически везде. SVG основан на методах замены изображений и подходит только для Интернета. Наконец, WOFF и WOFF2 также были созданы исключительно для Интернета и в основном представляют собой файлы TTF с дополнительным сжатием.

Переменные Шрифты

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

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

Почему переменные шрифты актуальны?

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

Использование переменных шрифтов

В настоящее время есть два разных способа использования переменных шрифтов. Сначала рассмотрим современный способ их реализации. Спецификация CSS настоятельно предпочитает использовать font-optical-sizing font-style , font-optical-sizing font-style , font-weight и font-stretch для управления любой из стандартных осей.

 @font-face { font-family: 'Avenir Next Variable'; src: url('AvenirNext_Variable.ttf') format('truetype'); } body { font-family: 'Avenir Next Variable', sans-serif; } 

 h1 { font-family: 'Avenir Next Variable'; font-weight: 430; } 

 p { font-variation-settings: 'wght' 630, 'wdth' 88; } 

 p { font-weight: 630; font-stretch: 88; } 

 git clone --recursive https://github.com/google/woff2.git cd woff2 make clean all 

 woff2_compress AvenirNext_Variable.ttf 

 src: url('AvenirNext_Variable.woff2') format('woff2'); 

 @font-face { font-family: 'Avenir Next Variable'; src: url('AvenirNext_Variable.woff2') format('woff2-variations'); src: url('AvenirNextLTPro-Bold.otf') format('truetype'); } html { font-family: 'Avenir Next Variable', sans-serif; } h1 { font-family: 'Avenir Next Variable'; font-weight: 430; } h2 { font-family: 'Avenir Next Variable'; font-weight: 630; }