Перевод статьи One File, Many Options: Using Variable Fonts on the Web от Ollie Williams
Статья длинная, а времени как всегда нет. Если вы поможете исправить недочеты — буду очень благодарен.
В 2016 году представители компаний Adobe, Microsoft, Apple и Google совместно объявили о важном собитии в веб-типографии. В версия 1.8, формата шрифта OpenType, введены вариативные шрифты. С таким большим количеством значимых имен, неудивительно, что все браузеры участвуют в гонке за реализацию новой спецификации.
Вес шрифта font weight может быть намного разнообразнее, чем просто жирный bold, или нормальный normal — профессионально разработанные шрифты доступны в вариантах от ультра тонкого до сверх жирного. Чтобы использовать все эти веса, нам нужен отдельный файл шрифта для каждого веса. В реальности редко используется более двух вариаций шрифта. И все же более широкий выбор добавляет визуальную иерархию и интерес к странице.
CSS3 представила свойство font-stretch со значениями от ultra-condensedдо ultra-expanded. До сих пор эти значения работали только, если вы предоставили отдельный файл для каждого начертания. Если вы хотите, чтобы каждый вариант веса и ширины был как обычной, так и курсивной версии, вам понадобятся десятки файлов.
С вариатиыными шрифтами мы можем получить все это разнообразие всего одним файлом.
Спецификация OpenType содержит пять стандартных осей standard axes of variation — все они обозначаются четырехбуквенной аббревиатурой. Это аспекты шрифта, которыми мы управляем.
wght — Вес контролируется свойством CSS font-weight. Значение может быть от 1 до 999. Это позволяет увеличить уровень контроля.
wdth — Ширина контролируется свойством CSS font-stretch. Значением может быть ключевое слово или процент.
opsz — Оптическое калибровка может быть включена или выключена с использованием нового свойства font-optical-sizing. (Я объясню, что это позже).
ital — Курсив устанавливается с помощью CSS font-style свойства, значением italic.
slnt — Наклон задается, установив CSS font-style наклонным oblique. По умолчанию шрифт будет иметь наклон в 20 градусов, но он также может принимать значения между -90 deg и 90 deg.
К сожалению, не каждый вариативный шрифт будет использовать все пять осей. Это полностью зависит от создателя конкретного шрифта.
В большинстве случаев вам понадобятся два файла шрифта: один для курсива и один для регулярного, так как ось ital не всегда реализована. Как сказал мне Frank Grießhammer из Adobe:
Курсивные и Римские стили имеют (часто радикально) различные принципы построения, поэтому точечные структуры могут не всегда быть совместимыми.
Браузер может эмулировать курсив у любого не-курсивного шрифта, но это типографски не рекомендуется.
Типографы могут определять именованные значения в своем вариативном шрифте. Именованное значение представляет собой пресет — конкретный значение, который шрифт может отобразить через имя (например, «Extra Light») (Это подобие соотношений в CSS normal/400). Однако в текущей спецификации CSS нет доступа к этим именованным значениям. Важно отметить, что когда вы используете такое значение, как extra-condensed или semi-expanded для font-stretch, значение отображается в процентах, предопределенных в спецификации CSS, а не любым именованным значением шрифта, даже если эти имена совпадают. Для font-weight bold значение соответствует 700, normal соответствует 400. Как говорит спецификация, «шрифт может предоставлять свои собственные именованные значения, но эти сопоставления не учитываются в CSS».
В спецификации CSS Fonts Level 4 вводится новое свойство (сокращение)font-variation-settings для управления параметрами вариативных шрифтов. Следующие два объявления CSS эквивалентны:
Спецификация настойчиво советует использовать свойстваfont-optical-sizing, font-style, font-weight и font-stretch вместо font-variation-settings для контроля любой из пяти осей шрифта. Myles Maxfield любезно объяснил мне почему:
font-changes-settingsне идентичен другим свойствам, поддерживающим вариации, потому что с этими другими свойствами браузер понимает смысл изменений и может применять их к другим форматам файлов шрифтов, или создание смежных правил если файл шрифта не поддерживает какую либо ось.
Со временем, Microsoft планирует регистрировать больше стандартных осей. По мере добавления новых осей мы также можем ожидать, что новые свойства CSS будут их контролировать. Создатели шрифтов также могут изобретать собственные оси. Вот почему в CSS было добавлено свойствоfont-variation-settings — это единственный способ управления различными осями вариативного шрифта. Lab DJR и Decovar — это два шрифта, сделанные с явным намерением продемонстрировать, насколько гибким может быть один вариативный шрифт. Например, Lab DJR предлагает четыре настраиваемые оси:
Эти специализированные оси, определенные типографом, должны использовать заглавные буквы, в то время как стандартизованные оси всегда используют нижний регистр. Когда речь идет о нестандартных осях, авторы CSS должны рассчитывать, что разработчики шрифтов будут правильно документировать их работу.
Представление
Вы можете загрузить вариативный шрифт в формате .ttf. Вы наверняка захотите преобразовать его в .woff2. Google предлагает инструмент командной строки, предсказуемо названный woff2. Если вы переходите cd в папку, содержащую ваш шрифт, вы можете просто ввести следующую строку в командной строке:
woff2_compress examplefont.ttfМы установили, что нам нужен только один HTTP-запрос на шрифт (или, возможно, два для разделения стилей Roman и Italic). Поскольку они делают так много работы, вы можете подумать, что размер файла вариативного шрифта намного больше, чем типичный файл шрифта. Давайте посмотрим.
Вот некоторые из вариативных шрифтов, которые я добавил на свой ноутбук, а также их размеры:
Давайте сравним это с отдельными экземплярами версии без изменений для Source Sans:
Анимации
Вариатиыные шрифты также позволяют анимировать font-weight (и любую другую ось). Хотя добавление печатной анимации может звучать избыточно, но ведь мы часто используем добавление веса шрифта при фокусе — это кажется естественным и интуитивным способом обозначить состояние пользователя. Раньше переход от нормального к жирному весу был совершенно беспорядочным. С вариативными шрифтами он может быть плавным и изящным.
Один шрифт подходит ко всему?
Вариативные шрифты — это не просто авангардный эксперимент. Оптическая калибровка должна обеспечить лучший опыт чтения в Интернете. Вы можете изменить размер шрифта font-size, и он все равно будет выглядеть одинаково. Оптическая калибровка размера означает оптимизацию по размеру для шрифта, где изменение формы буквы в разных размерах может улучшить читаемость. Мы не хотим, чтобы более крупный текст выглядел неэлегантным или неуклюжим, в то время как маленький текст читается легче при удалении мелких деталей. Утолщение тонких засечек и увеличение x-height, width, weight и letter-spacing все повышают удобочитаемость при меньших размерах.
Какие шрифты уже существуют?
Эта технология быстро проникает в браузеры. Для этого вам нужно найти вариативный шрифт, который вы действительно хотите использовать. У Google Fonts Early Access есть три доступных. Adobe перерабатывает некоторые из наиболее известных семейств (Minion, Myriad, Acumin и др.) для вариативности. Также выпущены шрифты с открытым исходным кодом Source Sans и Source Serif. Monotype, одна из крупнейших в мире типографических компаний представил бета-версии Avenir Next и Kairos Sans. Некоторые независимые типографы также начали выпускать вариативные шрифты. Имея вариативную поддержку шрифтов, доступную во всем главном программном обеспечении для создания шрифтов, мы можем ожидать, что ее доступность значительно расширится в 2018 году.
Использование вариативного шрифта
После того, как вы нашли нужный шрифт, вам нужно использовать @font-face, чтобы подключить его на свой сайт.
Мы не хотим, чтобы браузеры загружали шрифт, который они не могут использовать. По этой причине мы должны указать формат внутри правила @font-face. В зависимости от типа файла вашего шрифта переменной вы можете указать woff-variations, woff2-variations, opentype-variations или truetype-variations. Как уже упоминалось, вы почти всегда должны использовать woff2.
Третий @font-face необходим только для резервного копирования жирного шрифта для браузеров, которые не поддерживают переменные шрифты. Обратите внимание, что мы используем тот же файл шрифта переменной, что и для первого правила @ font-face, так как этот файл может быть как жирным, так и нормальным:
Если браузер поддерживает переменные шрифты, будут загружены и использованы SourceSansVariable.woff2 и SourceSansVariable-italic.woff2. Если нет, вместо этого будут загружены SourceSans.woff2, SourceSans-bold.woff2 и SourceSans-italic.woff2.
Далее мы можем применить шрифт к элементу, как обычно:
San Francisco
Хотя переменные шрифты приносят преимущества в производительности, «безопасные веб шрифты» (системные) по-прежнему остаются наиболее функциональными, поскольку шрифт уже установлен и загружать нечего не нужно. Если вы хотите использовать переменный шрифт без необходимости скачивать что-либо, Apple San Francisco, возможно, самый красивый из всех системных шрифтов, также является переменным шрифтом. Использование системных шрифтов больше не требует массива шрифтов:
Значение system-ui является новым стандартом для доступа к системным шрифтам, а -apple-system — нестандартизированный синтаксис, который работает в Firefox. Традиционно системные шрифты не имеют широкого диапазона весов или ширины. Надеемся, что больше будет доступно в виде переменных шрифтов, принося все преимущества переменных шрифтов без единого HTTP-запроса.
Поддержка
Переменные шрифты уже доступны в Chrome и Safari. Они уже находятся в insider preview version of Edge и под флагом в Firefox. В настоящее время не все части спецификации полностью реализованы Chrome. Использование переменных шрифтов в сочетании с font-style, font-stretch, font-weight и font-optical-sizing не работает в Chrome, поэтому на данный момент необходимо использовать font-variation-settings для управления пятью стандартными осями. Указание формата как woff2-variations внутри @font-face также не имеет поддержки в Chrome (вы можете указать только woff2, и шрифт по-прежнему будет работать, но тогда вы не сможете загрузить резервный шрифтwoff2).
