Приобретая лицензию на веб-шрифты, вы получаете пакет файлов шрифтов, который обычно включает по крайней мере некоторые из следующих форматов: Встроенный OpenType (EOT): EOT является устаревшим форматом, разработанным Microsoft. Старые версии Internet Explorer требуют EOT для отображения ваших веб-шрифтов. EOT часто обслуживается без сжатия, поэтому, если вам не требуется поддержка браузера, например, IE8 или ниже, вам лучше не использовать его.
TrueType (TTF): TTF — это формат шрифта, разработанный Microsoft и Apple в 1980-х годах. Современные файлы TTF также называются шрифтами TrueType OpenType. TTF может быть полезен для расширения поддержки некоторых старых браузеров, особенно на мобильных устройствах, если вам это нужно.
Web Open Font Format (WOFF): WOFF был разработан в 2009 году как формат оболочки для шрифтов TrueType и OpenType. Он сжимает файлы и поддерживается всеми современными браузерами.
Web Open Font Format 2 (WOFF2): WOFF2 — это обновление оригинального формата WOFF. Разработанный Google, этот формат считается лучшим из всех, потому что он предлагает меньшие размеры файлов и лучшую производительность для современных браузеров, которые его поддерживают.
Если хотите расширить поддержку как можно шире, добавьте в смесь файлы EOT и TTF. Шрифты SVG также традиционно использовались для расширения поддержки браузеров, но в Grilli Type больше не предлагается SVG-шрифты, поскольку они имеют ряд недостатков. Google Chrome, например, даже полностью убрал поддержку формата.
Использование @font-face для включения шрифтов в CSS.
Вот самый глубокий уровень поддержки, включая все форматы файлов шрифтов, которые мы обсуждали до сих пор:
@font-face {
font-family: FontName;
src: url(‘path/filename.eot’);
src: url(‘path/filename.eot?#iefix’) format(’embedded-opentype’),
url(‘path/filename.woff2’) format(‘woff2’),
url(‘path/filename.woff’) format(‘woff’),
url(‘path/filename.ttf’) format(‘truetype’);
}
Возможно урезать код, если стремимся поддерживать только современные браузеры:
@font-face {
font-family: FontName;
src: url(‘path/filename.woff2’) format(‘woff2’),
url(‘path/filename.woff’) format(‘woff’);
}
Как только шрифт был объявлен и определен, мы можем использовать его для наших элементов. Например:
body {
font-family: ‘FontName’, Helvetica, Arial, sans-serif;
}
Одним из наиболее гибких способов загрузки веб-шрифтов является их самостоятельное размещение. Это означает, что вы размещаете файлы на своем собственном сервере, и ваши шрифты всегда будут доступны, когда посетитель заходит на ваш сайт без сторонней зависимости. Как правило, ни коды отслеживания, ни JavaScript не требуются для загрузки файлов собственных шрифтов. Многие литейные фабрики малого типа предлагают шрифты для прямой загрузки, поэтому они могут быть размещены самостоятельно, и в Grilli Type мы убеждены, что это лучший способ обслуживания шрифтов.
В то время как некоторые типы литейных цехов предлагают самостоятельное размещение (как с громоздкими ограничениями, так и без них), другие предлагают только размещенные решения, то есть они размещают файлы от вашего имени. Некоторые из известных включают Hoefler & Co., Font Bureau и Typotheque. Font Bureau и Typotheque предлагают свои шрифты в обоих направлениях по разным ценам.
Прежде чем покупать лицензию, убедитесь, что вы знаете, как веб-шрифты литейного цеха предлагаются, потому что разница в хостинге и условиях использования может повлиять на их реализацию. Получите то, что наиболее подходит для вас и соответствует вашим потребностям, и убедитесь, что вы используете их на законных основаниях и в соответствии с лицензионным соглашением литейного завода.
Давайте рассмотрим некоторые из более продвинутых функций веб-шрифтов.
Интервалы и кернинг
Внутри файлов шрифтов есть две настройки, которые определяют пространство между символами:
- letter-spacing: определяется как боковые опоры слева и справа от каждого символа
- font-kerning: это относится к конкретным изменениям между двумя символами
Интервал вообще нельзя отключить, потому что иначе механизм визуализации текста (ваш браузер) не будет знать, что делать с этими буквами. Кернинг, с другой стороны, по умолчанию отключен в браузерах и должен быть включен вами в вашем CSS.
Сравнение типа с включенным и отключенным кернингом.
Активация кернинга во всех браузерах, которые его поддерживают:
p {
font-feature-settings: «kern» 1;
font-kerning: normal;
}
Если не используется что-то вроде Autoprefixer для управления поддержкой браузера в CSS, нужно вручную выписать префиксы поставщика браузера для этого параметра, чтобы расширить поддержку браузера для более старых версий:
p {
-moz-font-feature-settings: «kern» 1;
-ms-font-feature-settings: «kern» 1;
-o-font-feature-settings: «kern» 1;
-webkit-font-feature-settings: «kern» 1;
font-feature-settings: «kern» 1;
font-kerning: normal;
}
Расширенные возможности OpenType
Мы только что обсудили, как использовать атрибут font-feature-settings для управления кернингом, но его также можно использовать для управления другой доступной функцией OpenType в ваших веб-шрифтах. Количество поддерживаемых функций со временем растет, и альманах CSS-Tricks — это хорошее место для ссылки на то, что возможно с OpenType.
Функции OpenType действительно впечатляют, потому что они открывают множество возможностей для управления шрифтами без необходимости обслуживать несколько файлов, чтобы получить тот же эффект. В то же время стоит отметить, что функции, поддерживаемые файлом шрифтов OpenType, зависят от дизайнера шрифтов, и что не все шрифты поддерживают одинаковые функции. Чтобы проиллюстрировать, как расширенные возможности OpenType могут быть объединены вместе, следующий код включит цифровые символы шрифта с поддержкой OpenType, который поддерживает как цифры старого стиля (onum), так и пропорциональные цифры (pnum), а также включает кернинг и активирует определенный Стилистический набор включен в шрифт:
.my-element {
font-feature-settings: «onum» 1, «pnum» 1, «kern» 1, «ss01» 1;
}
Введите с и без активированных функций OpenType в примере кода.
Атрибут font-feature-settings можно использовать для активации стилистических альтернатив, дискреционных лигатур, различных типов рисунков, доступных в шрифте, маленьких заглавных букв и других полезных вещей. Typofonderie имеет хороший обзор этих расширенных функций, включая примеры.
Поскольку font-feature-settings используется для одновременной установки многих функций OpenType, невозможно определить один параметр по-другому, так как другие варианты не будут унаследованы. Все функции необходимо будет определить заново, чтобы изменить настройки дочерних элементов.
Разрешение интервалов и слов
CSS долгое время поддерживал атрибуты межбуквенного и межсловного интервалов. При правильном использовании оба обеспечивают достаточный контроль над двумя очень важными аспектами того, как будет выглядеть ваш тип. Как и во всех типографиях, вам нужно научиться оценивать различные варианты как функционально, так и визуально, и принимать решения на основе вашего впечатления. Различные контексты могут требовать разных интервалов. При меньших размерах большинство гарнитур получат небольшой дополнительный интервал между символами и словами. В больших контекстах, таких как заголовки, гарнитуры могут выиграть от более узкого расстояния. В любом случае правильные решения требуют внимания и вашего лучшего суждения, основанного на результатах.
Выявлено, что межбуквенный и межсловный интервалы лучше всего работают с использованием единиц em для значений. Это позволяет плавно регулировать интервал в зависимости от размера шрифта элемента, к которому они применяются. Следующий пример даст вашему контенту немного больше пространства для дыхания при меньших размерах шрифта:
p {
font-size: 12px;
letter-spacing: 0.015em;
word-spacing: 0.001em;
}
Сравнивая разницу с включенным и выключенным интервалом между буквами и словами.
Рендеринг шрифтов
Использование типа на экранах поднимает важные вопросы о том, как они отображаются. Шрифты обычно рассчитаны на сетку высотой около 1000 единиц — или даже больше — но затем отображаются с размером шрифта около 16 пикселей. Во взаимодействии между устройством, экраном и программным обеспечением это уменьшение разрешения и точности требует некоторых умных способностей, чтобы сделать мелкий шрифт разборчивым и красивым. Опять же, будьте внимательны, тестируйте во многих браузерах и используйте свое лучшее суждение, чтобы найти лучшие методы для улучшения читаемости. Каждая операционная система обрабатывает шрифты по-разному. В MacOS смарты находятся в операционной системе (и, следовательно, могут развиваться со временем), тогда как сами шрифты могут быть тупыми. Исторически сложилось так, что в Windows смарты должны были быть включены в программное обеспечение шрифтов, и система должна была использовать эти смарты, чтобы решить, как должен отображаться шрифт разных размеров. Эти смарты называются намеками. Информация подсказок, встроенная в файлы шрифтов, может сказать компьютеру, что два стержня символа «Н» должны иметь одинаковую ширину линии или что пространство над и под поперечиной должно оставаться примерно одинаковым при меньших размерах.
Microsoft предоставляет руководство по теме подсказок. Несмотря на то, что он был впервые выпущен в 1997 году, он все еще хорошо читается, потому что в нем так подробно рассматривается тема.
Сглаживание шрифтов
Хотя информация о подсказках, содержащаяся в файлах шрифтов, в MacOS в основном игнорируется, некоторые браузеры предоставляют дополнительный контроль над отображением шрифтов.
p {
-webkit-font-smoothing: antialiased; /* Chrome, Safari */
-moz-osx-font-smoothing: grayscale; /* Firefox */
}
Использование этих свойств CSS приводит к более четкой и тонкой визуализации текста в MacOS и iOS.
Как сглаживание, так и оттенки серого в основном полезны для балансировки рендеринга шрифтов при использовании светлого текста на темном фоне, так как в противном случае они будут выглядеть немного более смелыми. Свойство сглаживания шрифта и его значения не стоят на пути к тому, чтобы стать стандартной функцией CSS, поэтому используйте его с осторожностью и, возможно, только в тех случаях, когда вы знаете, что вам нужно ориентироваться на определенный браузер и контекст.
Web Font Resources
Если хотите глубже погрузиться в веб-шрифты, вот несколько рекомендуемых ресурсов, которые вы можете использовать, чтобы узнать больше: CSS-песочница Clagnut от OpenType от Richard Rutter: отличное место для тестирования возможностей OpenType и простой сборки необходимого CSS-кода. Руководство по веб-шрифтам Брэма Стейна: это самая всесторонняя электронная книга, которую вы можете прочитать о веб-шрифтах, рендеринге шрифтов и производительности шрифтов. Copy Paste Character: это отличный веб-сайт, который позволяет вам получить доступ практически к любому специальному символу, который вы когда-либо могли использовать.
Список литературы
1.OpenType specification [сайт]. URL: https://clck.ru/LhpGJ (28.11.2019)
2.TrueType Reference Manual [сайт]. URL: https://clck.ru/LhpGv (28.11.2019)
3.WOFF File Format 1.0 [сайт]. URL: https://www.w3.org/TR/WOFF/ (28.11.2019)
