От автора: в 2016 году представители компании Adobe, Microsoft, Apple и Google совместно объявили о важном развитии веб-типографии. Версия 1.8 формата шрифта OpenType вводила вариативные шрифты. С таким большим количеством значимых имен неудивительно, что все браузеры являются бортовыми и продвигаются вперед с реализацией.
Вес шрифта может быть гораздо больше, чем просто bold и normal — профессионально разработанные шрифты доступны в вариантах от тонкого hairline до сверхтяжелого жирного black. Чтобы использовать весь этот вес, нам нужен отдельный файл для каждого. Хотя дизайн вряд ли понадобится для каждого шрифта, более широкий выбор, чем полужирный или обычный, добавляет визуальную иерархию и интерес к странице.
Различных весовых значений более, чем достаточно. CSS3 представили font-stretch свойство со значениями от ultra-condensed до ultra-expanded. До сих пор эти значения работали только, если вы предоставили отдельный файл для каждой ширины. Если вы хотите, чтобы каждая комбинация веса и ширины была как обычной, так и курсивной, вам понадобились бы десятки файлов.
С переменными шрифтами мы можем получить все это разнообразие с одним файлом. В спецификации OpenType перечислены пять стандартных осей вариации — все они помечены четырехсимвольной строкой. Это аспекты шрифта, которыми мы управляем.
wght- Вес контролируется свойством CSS font-weight. Значение может быть от 1 до 999. Это позволит больше гранулировать уровень контроля.
wdth- Ширина контролируется свойством CSS font-stretch. Оно может принимать ключевое слово или процентное значение. Хотя долгое время можно было использовать преобразование в scaleX или scaleY, что искажает шрифт уродливыми способами, непреднамеренными типографом. Ось ширины элегантно определяется дизайнером шрифтов для расширения или конденсирования.
opsz- Оптический размер может быть включен или выключен с использованием нового свойства font-optical-sizing. (позже я объясню, какой оптический размер).
ital- Курсив выполняется путем установки свойства CSS font-style в italic
slnt- Наклон контролируется установкой свойства CSS font-style oblique. Наклон по умолчанию будет 20 градусов, но он также может принимать заданную степень между -90degи 90deg.
К сожалению, не каждый переменный шрифт обязательно будет использовать все пять осей. Это полностью зависит от создателя конкретного шрифта. После тестирования каждого переменного шрифта я мог бы получить на руки, безусловно, наиболее распространенный вес, который следует за ним по ширине. В большинстве случаев вам понадобятся два файла: один для курсива и один для регулярного, так как ital ось не всегда реализована. Как сказал мне Frank Grießhammer из Adobe: «Стили Italic и Roman имеют (часто радикально) различные принципы построения, поэтому точечные структуры не всегда могут быть совместимы.»
Браузер может сделать любой некурсивный шрифт подражающим курсиву, но это не рекомендуется.
Типографисты могут определять именованные экземпляры в своем переменном шрифте. Именованный экземпляр представляет собой пресет — конкретный вариант, который шрифт может получить с именем (например, «Extra Light»), а не только с числами. Однако в текущей спецификации CSS нет доступа к этим именованным экземплярам. Важно отметить, что при использовании значения, подобного extra-condensed или semi-expanded для font-stretch, значение отображает процент, предопределенный в спецификации CSS, но не на любой именованный экземпляр, выбранный создателем шрифта. Для font-weight значение bold сопоставляется с 700, а normal с 400. Как показывает спецификация, «шрифт может внутренне предоставлять свои собственные сопоставления, но эти сопоставления внутри шрифта не учитываются».
CSS Fonts Module Level 4 вводит новое свойство font-variation-settings для управления вариантами переменных шрифтов. Следующие два объявления CSS эквивалентны:
h1 { font-weight: 850; font-style: italic; font-stretch: normal;
} h1 { font-variation-settings: "wght" 850, "wdth" 100, "ital" 1;
}
Спецификация больше предпочитает использовать для управления любой из пяти стандартных осей font-optical-sizing, font-style, font-weightи font-stretch, нежели font-variation-settings. Майлс Максфилд любезно объяснил мне:
«Свойство font-variation-settings не идентично другим свойствам, поддерживающим вариации, потому что с другими свойствами браузер имеет представление о значении вариаций и может делать такие вещи, как применение их к другим форматам файлов шрифтов, или создание синтезированных версий, если файл шрифта не поддерживает ось.»
С течением времени Microsoft будет регистрировать больше стандартных тегов осей . По мере добавления новых осей мы также можем ожидать, что новые свойства CSS будут их контролировать. Создатели шрифтов могут изобретать собственные шрифты. Вот почему font-variation-settings был добавлен в CSS — это единственный способ управлять настраиваемыми осями. Lab DJR и Decovar — это два шрифта, сделанные с явным намерением продемонстрировать, насколько гибким может быть один переменный шрифт. Например, Lab DJR предлагает четыре настраиваемые оси:
h1 { font-variation-settings: 'SIZE' 100, 'QUAD' 80, 'BEVL' 950, 'OVAL' 210;
}
Эти специализированные оси, определенные литейным цехом, должны использовать заглавные буквы, в то время как стандартные оси всегда используют нижний регистр. С уникальными и нестандартными параметрами авторы CSS должны рассчитывать, что разработчики шрифтов будут правильно документировать их работу.
Производительность
Загрузить переменный шрифт можно в формате TTF, а не как предварительно сжатый файл. Вы обязательно захотите преобразовать его .woff2. Google предлагает инструмент командной строки, предсказуемо названный woff2, чтобы сделать всё проще. Если cd в папке, содержащей ваш шрифт, в командной строке, можно ввести:
woff2_compress examplefont.ttf
Мы установили, что нам нужен только один HTTP-запрос на шрифт (или, возможно, два для разделения стилей Roman и Italic). Поскольку они делают так много работы, следует ожидать, что размер переменного файла шрифта намного больше, чем типичный файл шрифта. Будем иметь ввиду (не совсем научно).
Вот некоторые из переменных шрифтов и их размеры, которые я установил на своем ноутбуке:
Давайте сравним это с отдельными экземплярами версии без изменений для Source Sans:
Анимация
Переменные шрифты также означают, что в первый раз font-weight(и любую другую ось) можно анимировать. Хотя добавление анимации может звучать как избыточное украшение, веб-сайт может с радостью выживать без этого, например, добавление веса на фокус, кажется естественным и интуитивным способом обозначить состояние пользователя. Раньше переход от нормального к жирному весу был совершенно беспорядочным. С переменными шрифтами он может быть плавным и изящным.
Один размер подходит всем?
В то время как Lab DJR и Decovar творчески захватывающе, переменные шрифты — это не просто авангардный экспериментатор. Оптическая калибровка должна обеспечить лучший опыт чтения в Интернете. В настоящее время шрифт в Интернете зависит от размера; вы можете изменить font-size и он будет выглядеть точно также. Оптическое определение размера означает оптимизацию по размеру для шрифта, где изменение формы буквы может улучшить читаемость. Мы не хотим, чтобы более крупный текст выглядел неэлегантным или неуклюжим, в то время как мелкий текст выигрывает от удаления деталей. Более открытые счетчики, утолщение тонких засечек и увеличение x-height, width, weight и letter-spacing повышают удобочитаемость при меньших размерах. auto — начальное значение, поэтому, если вы используете шрифт, который использует индекс оптического размера, вы получаете его прямо из коробки.
Какие шрифты доступны?
Эта технология быстро проникает в браузеры. Для этого вам нужно найти переменный шрифт, который вы действительно хотите использовать. У 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-family: 'source sans'; src: url(SourceSansVariable.woff2) format("woff2-variations"), url(SourceSans.woff2) format("woff2"); /* for older browsers */ font-weight: normal; font-style: normal;
} @font-face { font-family: 'source sans'; src: url(SourceSansVariable-italic.woff2) format("woff2-variations"), url(SourceSans-italic.woff2) format("woff2"); font-weight: normal; font-style: italic;
}
Третий @font-face необходим только для резервного копирования жирного шрифта для браузеров, которые не поддерживают переменные шрифты. Обратите внимание, что мы используем тот же файл переменного шрифта, что и для первого @font-face правила, так как этот файл может быть как жирным, так и нормальным:
@font-face { font-family: 'source sans'; src: url(SourceSansVariable.woff2) format("woff2-variations"), url(SourceSans-bold.woff2) format("woff2"); font-weight: 700; font-style: normal;
}
Если браузер поддерживает переменные шрифты SourceSansVariable.woff2 и SourceSansVariable-italic.woff2, то они будут загружены и использованы. Если нет, то вместо этого будут загружены SourceSans.woff2, SourceSans-bold.woff2 и SourceSans-italic.woff2.
html { font-family: 'source sans', Verdana, sans-serif;
}
San Francisco
Хотя переменные шрифты приносят преимущества в производительности, «веб-безопасные» системные шрифты по-прежнему остаются наиболее функциональными, поскольку шрифт уже установлен и загружать ничего не нужно. Если вы хотите использовать переменный шрифт без необходимости скачивать что-либо, San Francisco от Apple , возможно, самый красивый из всех системных шрифтов, также является переменным шрифтом. Использование системных шрифтов больше не требует массива шрифтов:
html { font-family: system-ui, -apple-system;
}
Значение system-ui является новым стандартом для системы доступности шрифтов, а -apple-system не является стандартным синтаксисом, который работает на Firefox. Традиционно системные шрифты не имеют широкого диапазона веса или ширины. Надеемся, что будет больше доступно в виде переменных шрифтов, принося все преимущества переменных шрифтов без единого HTTP-запроса.
Поддержка браузера
Переменные шрифты отправлены в Chrome и Safari. Они уже находятся в инсайдерской версии предварительного просмотра Edge и за флажком в Firefox. В настоящее время не все части спецификации полностью реализованы в Chrome. Использование переменных шрифтов в сочетании с font-style, font-stretch, font-weight и font-optical-sizing не работает в Chrome, так что использование font-variation-setting для управления пяти стандартных осей какое-то время будет необходимо. Указание формата woff2-variations внутри внутри @font-face также не имеет поддержки в Chrome (вы можете указать только woff2 и шрифт по-прежнему будет работать, но тогда вы не сможете получить резервную переменную woff2).
Автор: Ollie Williams
Источник: https://css-tricks.com/
Редакция: Команда webformyself.