Вариабельные шрифты

Автор: Richard Rutter    Источник: clagnut.com
13.03.2017
820
0
img

В октябре 2016 была выпущена 1.8 версия OpenType, а вместе с ней и новая обширная технология: OpenType Font Variations. Более известная как вариабельные шрифты, эта технология позволяет одному шрифтовому файлу вести себя как несколько шрифтов. Это сделано с помощью заданных вариаций шрифта, которые интерполируются по одной или нескольким осям. Двумя из этих осей могут быть ширина и вес, но шрифтовые дизайнеры могут задать и много других.

Предыдущее изображение показывает вариабельный шрифт, представленный 36 разными стилями, все в одном файле. Допустим, вы хотите использовать 4 стиля, вариабельный шрифт сможет обеспечить все эти 4 стиля и быть при этом значительно меньше, чем 4 отдельных файла, а так же иметь дополнительное преимущество по скорости загрузки, требуя всего одного обращения к серверу.

На изображении варьируется ширина и вес. Только эти две оси, согласно спецификации OpenType Font Variations, означают, что теоретически доступно 1000×1000 (один миллион) вариаций внутри одного файла. Третья ось может увеличить количество вариаций до одного миллиарда.

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

Внутри области, созданной осями вариаций, шрифтовые дизайнеры могут задавать конкретные позиции по имени. Каждая позиция может обозначаться как отдельный шрифт, например, ‘regular’, ‘light condensed’ или ‘extra bold extended’.

В спецификации OpenType пять осей определяются четырехсимвольными тегами: wght (weight), wdth (width), ital (italic), slnt (slant) и opsz (optical size). Эти вариации могут быть заданы свойствами font-weight, font-stretch и font-style. В CSS4 были добавлены новые значения свойств для работы с шрифтовыми вариациями:

  • font-weight может принимать любое целое число от 1 до 999 (не ограничиваясь значениями, кратными 100, как в CSS3).
  • font-stretch принимает процентные значения в диапазоне, где 100% - это normal, 50% - ultra-condensed, а 200% - ultra-expanded.
  • font-style принимает как значение угол наклона в диапазоне от -90° до 90°.
  • font-optical-sizing – новое свойство, принимающее значения auto или none. Эти значения включают или выключают свойство font-optical-sizing в зависимости от того, доступно ли оно как ось в вариабельном шрифте.

Шрифтовые дизайнеры также могут задавать пользовательские оси со своими собственными четырехсимвольными тегами. Это позволяет настраивать практически любое свойство шрифта, например, контраст, x-высоту, форму засечек, шероховатость и даже некоторые свойства глифов, например, такие как длина хвостика Q. Используя синтаксис font-feature-settings, можно настраивать пользовательские оси, так же как и предопределённые. К примеру, код ниже задаст тексту следующие вариации: очень широкий, легкий, оптический размер - 48pt:

h2 {
    font-variation-settings: "wdth" 600, "wght" 200, "opsz" 48;
}

Посетите сайт Лоуренса Пинея (Laurence Penney) Axis-Praxis.org, чтобы поиграть с вариациями (нужно установить Safari Technology Preview).

Так же как и обычные шрифты OpenType, вариабельные шрифты могут использоваться в качестве веб шрифтов как есть или предварительно упакованные в WOFF формат. Если вы хотите использовать вариабельный шрифт как веб шрифт, то в правиле font-face нужно указать формат woff-variations или ttf-variations. Чтобы обеспечить откат для браузеров, которые не поддерживают вариабельные шрифты, можно использовать правило font-face несколько раз.

@font-face {
    font-family: 'Nicefont';
    src: url('nicefont_var.woff2') format('woff-variations');
    src: url('nicefont_regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Nicefont';
    src: url('nicefont_var.woff2') format('woff-variations');
    src: url('nicefont_black.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

На момент написания вариабельные шрифты поддерживается только в Webkit Nightlies и Safari Technology Preview, но нигде нет поддержки font-weight и других подобных свойств. К тому же, формат веб шрифта должен быть woff или ttf.

Вариабельные шрифты были разработаны совместно Adobe, Apple, Google и Microsoft. Это значит, что новые версии браузеров начнут поддерживать эту технологию, как только будет согласована точная реализация и CSS спецификация. По оценкам на сегодняшний день вариабельные шрифты появятся в вебе в начале 2018.

ПОХОЖИЕ СТАТЬИ: