Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Вы можете просмотреть полную транскрипцию и скринкаст для текста и типографии здесь .
Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду изучать различные значения CSS (и свойства), каждое из которых начинается с другой буквы алфавита. Мы знаем, что иногда скринкастов недостаточно, поэтому в этой статье мы добавили краткие советы по использованию функций OpenType для стилизации текста.
T для текста и OpenType
Советы CSS на этой неделе посвящены тексту и типографике. В оригинальном скринкасте мы рассмотрели все виды CSS-свойств, связанных со стилем текста . Но в этой серии мы еще подробно рассмотрим функции OpenType.
Это семейство свойств добавляет всевозможные типографские черты вашему тексту, и, если у вас есть доступ к шрифтам, которые предлагают эти функции, они действительно улучшат качество чтения для ваших пользователей.
Давайте начнем с того, где вы можете найти эти необычные шрифты.
Используйте премиум сервис шрифтов
С помощью директивы @font-face в CSS мы можем загрузить любой собственный шрифт в наши проекты. Это может происходить от такой службы, как Google Fonts, или вы можете создать собственный веб- шрифт, используя генератор, такой как Font Squirel . Обе эти услуги предлагают множество отличных бесплатных шрифтов, но иногда вам могут понадобиться более профессиональные, премиум-гарнитуры из платных сервисов, таких как Adobe Typekit , Fonts.com или другие.
Эти премиум-сервисы не только предоставляют высококачественные шрифты, но и скрывают много волшебства, чтобы улучшить удобочитаемость, доставку и производительность загрузки самих шрифтов. Я хотел бы углубиться в это в какой-то момент в будущем, но сейчас это как-то проносится над моей головой!
В настоящее время я использую Adobe Typekit для доставки шрифтов для клиентских проектов и до сих пор был очень доволен этим сервисом. Моя единственная жалоба заключается в том, что я не могу загрузить все их шрифты для локального использования, что немного проблематично при разработке этих шрифтов в Sketch или Adobe Photoshop.
Но одно из основных преимуществ заключается в том, что они предлагают ряд шрифтов с функциями OpenType. Наличие шрифта, поддерживающего функции OpenType, является первым шагом к возможности проработать следующие несколько советов.
Включить лигатуры
Лигатуры — это функция OpenType, которая заменяет общие последовательности из нескольких символов одним символом для улучшения разборчивости и более элегантного внешнего вида. Примеры лигатур можно найти здесь .
Классическими примерами являются комбинации букв, таких как ff или fi , fl , ffi или th . При просмотре в виде нескольких символов буквы могут казаться слишком большими между ними. Лигатуры просто текут лучше. Это микрооптимизация, но она выглядит стильно, и вы поразите всех своих друзей-ботаников.
Чтобы использовать лигатуры в CSS (если ваша гарнитура их поддерживает), вы можете использовать следующий фрагмент:
body { font-variant-ligatures: common-ligatures; font-feature-settings: "liga", "clig"; /* for IE */ }
Вместо этого есть альтернативный синтаксис для установки параметров font-feature-settings который позволяет разделить запятую списком функций OpenType за один раз — немного как сокращение для margin или padding .
Лигатуры включены по умолчанию, если вы используете Safari, но чтобы Firefox, Opera, Chrome и IE (10+) получили наилучшие впечатления от чтения, вам необходимо установить это явно.
Используйте swash, чтобы добавить процветание
Если вы работаете над проектом, который требует небольшого дополнительного типографского расцвета, вы можете использовать функцию OpenType. Это займет ключевые символы в вашем тексте и заменит их на swash глифы; это те же буквы, но гораздо более экстравагантные.
Список возможностей OpenType в CSS можно найти в этом полезном ресурсе .
Чтобы включить swash, используйте следующий фрагмент:
.fancy-title { font-feature-settings: "swsh"; }
Улучшить межбуквенный интервал с помощью кернинга
В текстовом скринкасте мы обсуждали такие свойства, как letter-spacing и word-spacing для управления пространством между символами и словами. Но для дополнительного контроля и лучшей разборчивости мы можем использовать функцию OpenType font-kerning .
Кернинг — это процесс настройки расстояния между определенными комбинациями символов, чтобы они были наиболее подходящими для читателя. Это то, что дизайнеры могут одержать вручную в графических пакетах, таких как Illustrator или Photoshop, но часто приходится отказываться от контроля, как только текст попадает в браузер.
Эту функцию можно включить, установив свойство font-kerning или font-feature-settings следующим образом:
body { font-kerning: normal; font-feature-settings: "kern"; }
Установить несколько функций OpenType одновременно
Мы рассмотрели три наиболее распространенных и впечатляющих функции OpenType, но их гораздо больше. Если вы хотите использовать эти мощные функции, вероятно, вы захотите настроить многие из них одновременно. И мы можем сделать это с помощью сокращений font-variant или font-feature-settings .
Причиной обсуждения обоих этих свойств являются проблемы с поддержкой браузера. На момент написания статьи IE10 поддерживает font-feature-settings свойств font-kerning но не поддерживает другие свойства OpenType, такие как свойства font-kerning или font-variant . Safari поддерживает отдельные свойства, такие как font-kerning но не распознает font-feature-settings .
Итак, чтобы включить все функции, которые только что обсуждались, нам нужно использовать следующий набор свойств для покрытия наших баз:
body { font-variant: common-ligatures; font-kerning: "kern"; font-feature-settings: "liga", "clig", "swsh", "kern"; }
Используйте шаблон, чтобы начать свой опыт OpenType
Если все это кажется слишком сложным, чтобы поразмыслить, и вы хотите что-то быстрое и простое, чтобы заставить вас работать, я полностью понимаю и, к счастью, есть что-то, что может вам помочь
Возможно, вы знакомы с normalize.css, который представляет собой «сброс» CSS, используемый для нормализации таблиц стилей пользовательских агентов в разных браузерах.
Недавно я наткнулся на файл normalize-opentype.css, который добавляет функции OpenType со всеми необходимыми свойствами и отступлениями для глубокой поддержки браузера, одновременно предоставляя вам все преимущества OpenType. Проект normalize-opentype включен
github и использовать его так же просто, как загрузить и связать дополнительную таблицу стилей или добавить ее в свой набор препроцессора @imports при использовании одного из них.
Это отличный инструмент, и я обязательно поэкспериментирую с ним в следующем проекте!