CSS от А до Я работа с OpenType в тексте


OpenType-фичи в вебе

Пару ссылок и соображений

Полгода мариновал набросок статьи, который спонтанно набросал за 10 минут за чашкой кофе. И всё это время держал тот черновик в голове: вот появится минутка — напишу. Сегодня обнаружил, что большая часть того, что я хотел рассказать, уже неплохо описана в других статьях. Это лучшее, что может быть с идеей — кто-то уже всё сделал, можно выдохнуть, жить спокойно дальше и высвободить голову для других интересных идей.

Тот черновик возник на стыке двух дисциплин: я тогда перечитывал Брингхерста и занимался переделкой своего блога. Я устроил небольшое исследование на счёт OpenType-фич. Меня смутило, что поддержка фич браузерами очень высокая, но никто не практикует их. Я невольно обращаю внимание на своши, лигатуры или правильно набранный акроним, но их почти нигде нет. Кажется, проблема в том, что есть больше сотни фич, но что с ними делать — не сказали.

Вместо того, чтобы писать пост, я теперь просто поделюсь ссылками и мыслями на этот счёт.

  • Caring about OpenType features. В статье рассмотрены основные фичи и три случая набора: что нужно для основного текста, что для заголовка, а что полезно для таблиц.
  • OpenType features in CSS . Быстрая шпаргалка по основным фичам. В современном браузере сразу видно, в чём разница.
  • Syntax for OpenType features in CSS . Ещё одна шпаргалка. Более подробная, сразу с CSS -стилями.
  • OpenType specification. Спецификация, описания всех 100+ фич.
  • Utility OpenType. CSS -библиотека с основными фичами. Опять же — фич дофига, а что с ними делать — не сразу ясно. Нужно учить матчасть.
  • The State of Web Type. Can I Use в мире типографских штук.
  • Пока разбирался сам, собрал такую таблицу для порядка в голове
  • Перед тем, как работать с OT -фичами, стоит убедиться, что в кассе шрифта есть нужные символы. Я бы, например, смотрел, есть ли у шрифта минускульные цифры и капитель. А вообще, это же от нужды зависит. Капитель может быть и не нужна. И с маюскульными цифрами тоже можно нормально жить. Ну и вряд ли вам понадобятся исторические лигатуры, если вы проектируете пульт управления атомной электростанции.
  • Дополнительные глифы раздувают размер файла. В каком-то смысле OT -фичи — это сделка с совестью. С другой стороны, 200 КБ — размер одной фотки.
  • Есть два способа манипуляции OT -фичами: низкоуровневый (через свойство font-feature-settings) и высокоуровневый (через свойства font-variant-*). Первый способ имеет более широкую поддержку, но очень неудобный. Смотрите примеры в ссылках выше, чтобы понять, какой это трэш: чтобы изменить одну опцию — нужно тянуть все остальные опции. Второй способ сильно удобнее, но у него меньше поддержка. Спецификации рекомендуют отдавать предпочтение второму способу.
  • Гигиенический минимум текста для чтения — стандартные и контекстные лигатуры, кернинг и контекстные альтернативы (см. первую ссылку). В современных браузерах, кажется, это всё включено по умолчанию, но лучше задавать свойства явно.
  • Набор прописными и капитель, который сейчас царит в рунете — подделка и бутафория. Эти стили не должны набираться тупо прописными буквами с уменьшенным кеглем: уменьшенные прописные выглядят тоньше строчных и обращают на себя внимание. Для такого набора должны быть специальные глифы. Вообще, имитация типографических штук типа висячей пунктуации и капители с помощью костылей — это плохо, наверное. Такие штуки должны делаться браузером.
  • Фичи super, sub, ordinals — кайф. Для верхних и нижних индексов будут использованы не физически уменьшенные символы, а специально отрисованные глифы.
  • Наверное, все уже знают, что в Sketch есть способ работать с OT -фичами: View → Show Fonts → Gear → Typography.

Про CSS

Вариативные шрифты

Вариативные (или настраиваемые) шрифты — это, без преувеличения, новая страница в веб-типографике. Настраиваемые шрифты стали возможны благодаря совместным усилиям компаний Microsoft, Apple, Adobe и Google. Концепция была впервые представлена в сентябре 2020 года, вместе с релизом OpenType 1.8. На самом деле, работы в этом направлении велись ещё в 90-х, но только широкое использование шрифтов в вебе дало этой идее вторую жизнь и бурное развитие.

На момент написания статьи вариативные шрифты уже достаточно хорошо поддерживаются приложениями (Photoshop, Illustrator) и браузерами (Chrome, Edge, Safari, в Firefox пока за флагом и только на MacOS), а кроме того, выложено несколько свободно распространяемых демо-версий, следовательно, уже можно заняться изучением возможностей таких шрифтов и подготовиться к их использованию в реальной жизни.

Вариативные шрифты — это расширение формата OpenType, которое позволяет хранить все варианты начертаний в одном файле, а для переключения между ними использовать не только фиксированные шаги, но и промежуточные значения. Например, вместо привычных значений жирности вроде 100 , 400 , 700 можно будет задать 75 или 650 , и так же гибко можно настроить ширину символа от самого сжатого до самого широкого задав любое значение в предопределённом диапазоне, и всё это без загрузки дополнительных файлов:

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

Настройками шрифта можно управлять с помощью CSS.

Высокоуровневые и низкоуровневые CSS-свойства

Низкоуровневые — это font-variation-settings и font-feature-settings . Их значения состоят из списка пар имён и значений, перечисленных через запятую.

Высокоуровневые — это, например, font-optical-sizing , font-variant-ligatures и font-variant-numeric .

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

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

Доступные настройки шрифта можно воспринимать как API: можно управлять только теми, которые предопределил разработчик. Если какие-то настройки не предусмотрены, ими управлять нельзя. Следовательно, чтобы полноценно пользоваться шрифтом, нужно точно знать какие возможности в нём есть. Для определения свойств шрифта удобно использовать вот эти сервисы:

  • fontdrop.info — покажет все возможности шрифта и позволит поиграться с ними вживую. Не поддерживает WOFF2.
  • wakamaifondue.com — покажет возможности, живые примеры и предложит CSS. Так как он пытается показать примеры для всех настроек шрифта, на шрифтах с кучей символов и настроек страница может ощутимо тормозить. Поддерживает WOFF2.

Для экспериментов можно воспользоваться шрифтами, выложенными в открытый доступ:

font-variation-settings

Свойство позволяет управлять вариациями шрифта, задавать как отрисовывается глиф (наклон, толщина линий, ширина символа). Исключение составляет ital , при котором могут заменяться глифы.

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

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

Значение по умолчанию: normal (шрифт выглядит как обычно, настройки не применяются).

See the Pen aKLXWW by yoksel (@yoksel) on CodePen.

Так как в курсиве глифы выглядят иначе, плавный переход от одного к другому затруднителен, поэтому здесь можно только включить или выключить свойство, задав 1 или 0 .

Также в этом демо можно увидеть как огругляются неподдерживаемые значения. Можно задать, например, «ital» 0.5 , и оно приведётся к единице, а все меньшие значения — к нулю.

По идее, slnt — это наклон, а не курсив, то есть глифы не меняются, но в некоторых шрифтах такое поведение демонстрирует ital . Для демо был выбран KairosSans, в котором ital ведёт себя как slnt .

В отличие от ital , наклон может изменяться плавно.

opsz — оптический размер.

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

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

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

Управление шириной глифа доступно во многих шрифтах.

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

Полный список предопределённых вариаций можно найти в спецификации OpenType, там же есть подробное описание каждой из них.

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

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

В этом случае каждый отдельный стиль текста может задаваться набором значений:

Обратите внимание, что названия кастомных меток пишутся капсом.

А у Slovic — всего одна настройка, но она позволяет плавно переключаться между предустановленными стилями:

Значения вариаций можно анимировать.

font-feature-settings

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

  • liga — лигатуры (когда для удобочитаемости два символа отображаются как один)
  • smcp — отображение строчных как маленьких заглавных
  • frac — отображение дробей
  • onum — цифры в старом стиле
  • zero — перечеркнутый ноль

Если фичу нужно включить, достаточно её имени, например:

Хотя запись типа «smcp» on помогает лучше понять что происходит в коде.

Если же нужно выключить, обязательно добавлять off :

Некоторые фичи включены по умолчанию, например, разные виды лигатур: clig, liga и rlig. Подробнее можно почитать в спецификации.

Здесь приведено лишь небольшое количество возможностей, полный список с подробными описаниями есть в спецификации OpenType.

Много примеров с кодом можно найти здесь: OpenType features in CSS.

Как уже говорилось выше, font-feature-settings — это низкоуровневая настройка. Спецификация рекомендует, по возможности, использовать высокоуровневые варианты, например:

  • font-variant-ligatures для управления лигатурами (спецификация)
  • font-variant-caps для приведения строчных к заглавным (спецификация)
  • font-variant-numeric для управления отображением цифр (спецификация)

Больше вариантов можно найти в разделе спецификации Font Feature Properties.

font-feature-settings может использоваться для получения более или менее радикального варианта шрифта:

Ещё интереснее распорядился фичами автор шрифта dT Jakob Variable Concept: он сделал не только вариативный шрифт, но и слоёный, и стиль для каждого из слоёв включается с помощью лигатур:

See the Pen dKZdRV by yoksel (@yoksel) on CodePen.

Не уверена, что это правильное использование лигатур, но вариант, безусловно, интересный.

Использование в реальной жизни

В данный момент не все браузеры поддерживают управление вариативными шрифтами, поэтому помимо настраиваемого шрифта на страницу придётся подключать обычные. Это предлагается делать следующим образом:

Затем с помощью @supports определяется поддержка настроек браузерами и задаётся нужный шрифт:

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

Я совсем недавно начала погружаться в тему, так что могла допустить ошибки и неточности. Сообщите мне о них, пожалуйста, если найдутся.

Работа с текстом в CSS

CSS дает широкие возможности по оперированию стилем текста. Можно влиять на шрифт, цвет, размер и другие свойства текста.

Так как эта страница расчитана на новичков, то сначала напомним базовый синтаксис CSS и используемую терминологию.

Каждое правило CSS состоит из селектора и определения. Селектор — обычно это тег, к которому мы применяем наш стиль, а определение — это само стилевое отображение. Определение состоит из свойства и его значения. Например: свойство — цвет, значение — красный.

Синтаксис CSS следующий:

Пример правила CSS:

В этом примере задано правило тегу

отображать текст синим цветом. Одному селектору можно указать несколько пар (свойство : значение).

В этом примере задано правило тегу

отображать текст синим цветом и размером 10pt. То есть тут мы имеем две пары (свойство : значение) применённые к одному селектору, в данном случае к тегу абзаца

В дальнейшем, когда в тексте будут встречаться слова свойство и значение, будет иметься ввиду именно определение для селектора в правиле CSS.

Свойства шрифта

Свойство font-family

Свойство Значение Описание Пример
font-family имя шрифта Устанавливает шрифт из списка P

Если не указывать это свойство в CSS, то броузер будет показывать текст шрифтом по умолчанию. Обычно это Times New Roman.

Список шрифтов в значении font-family может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки, одинарные или же двойные.

Браузер поочерёдно проверяет наличие шрифтов из списка на компьютере пользователя. Если первый шрифт в списке есть, то используется он, иначе браузер проверяет наличие второго шрифта из списка. Если ни одного нет, используется шрифт по умолчанию. В конце списка обычно прописывают ключевые слово, которое описывает тип желаемого шрифта — serif, sans-serif, fantasy, cursive или monospace.

Универсальные семейства шрифтов:

  • serif — антиквенные шрифты (шрифты с засечками), типа Times;
  • sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
  • monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
  • fantasy — семейство декоративных шрифтов;
  • cursive — семейство курсивных шрифтов;

Пример с использованием:

Свойство font-style

Свойство Значение Описание Пример
font-style normal
italic
oblique
Нормальный шрифт
Курсив
Наклонный шрифт
P

Пример кода, в этом примере встроим стили в тег при помощи атрибута style.

Видно что курсив от наклонного шрифта внешне не отличается.

Свойство font-variant

Свойство Значение Описание Пример
font-variant normal
small-caps
Устанавливает капитель (особые прописные буквы) P

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

Свойство font-weight

Свойство Значение Описание Пример
font-weight normal
lighter
bold
bolder
100–900
Нормальная жирность
Светлое начертание
Полужирный
Жирный
100 — светлый шрифт,
900 — самый жирный
P

Свойство font-weight устанавливает насыщенность шрифта. Для этого в значении используются ключевые слова: bold — полужирное начертание, normal — нормальное начертание. Значение может быть установленно в диапазоне от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (normal, которое установлено по умолчанию) соответствует 400, стандартный полужирный текст, bold, — значению 700.

Браузеры обычно не могут точно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold , normal и lighter . На практике же начертание в большинстве браузеров обычно ограничено только двумя вариантами: нормальное начертание и жирное начертание.

Значения lighter и bolder изменяют жирность шрифта относительно насыщенности родителя, соответственно, в меньшую и большую сторону.

Свойство font-size — определяет размер шрифта элемента. Размер шрифта можно задать несколькими способами.

Свойство font-size

Свойство Значение Описание Пример
font-size normal
pt
px
%
нормальный размер
пункты
пикселы
проценты
font-size: normal
font-size: 11pt
font-size: 11px
font-size: 110%

Абсолютный размер кегля шрифта может задаваться с использованием ключевых слов: xx-small (крайне малый), small (малый), medium (средний, значение по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое). Абсолютные размеры шрифта зависят от настроек браузера и операционной системы, так что они не совсем абсолютны.

Для изменения размера текста относительно родителя используется другой набор констант (larger — увеличивает размер относительно родительского, smaller — уменьшает размер).

Свойства текста

Кроме работы со шрифтами, CSS даёт ряд инструментов для работы с свойствами самого текста.

Рассмотрим первое свойство:

Свойство line-height

Свойство Значение Описание Пример
line-height normal
множитель
значение
%
Межстрочный интервал (интерлиньяж) line-height: normal
line-height: 1.5
line-height: 12px
line-height: 120%

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

При процентной записи за 100% берется высота шрифта.

Свойство text-decoration

Свойство Значение Описание Пример
text-decoration none
underline
overline
line-through
blink
Убрать все оформление
Подчеркивание
Линия над текстом
Перечеркивание
Мигание текста
text-decoration: line-through

При помощи определения < text-decoration : none >можно убирать подчеркивание у ссылок, которое устанавливается в браузерах по умолчанию.

В примере ссылка не имеет линии подчёркивания.

Свойство text-transform — управляет отображением букв, можно устанавливать заглавные или прописные символы в зависимости от выбранного значения.

Свойство text-transform

Свойство Значение Описание Пример
text-transform none
capitalize
uppercase
lowercase
Убрать все эффекты
Начинать С Прописных
ВСЕ ПРОПИСНЫЕ
все строчные
text-transform: uppercase

Сравните текст который содержится в html-коде с текстом в окне браузера.

Свойство text-align — служит для выравнивания текста по горизонтали окна браузера или контейнера, в котором расположен блок текста.

Свойство text-align

Свойство Значение Описание Пример
text-align left
right
center
justify
Выравнивание текста text-align: right

Подробное описание значений:

  • center — текст выравнивается по центру.
  • justify — выравнивание по ширине, фактически это выравнивание по правому и левому краю одновременно, между словами текста образовываются пустые места, которые браузер заполняет пробелами.
  • left — выравнивание по левопу краю. Это значение используется по умолчанию.
  • right — выравнивание по правому краю.

Пример использования этого свойства будет совмещён с примером работы следующего свойства.

Свойство text-indent — служит для создания величины отступа первой строки блока текста (например, для абзаца

Это свойство допускает отрицательное значение, в таком случае создается выступ первой строки.

Подключение шрифтов CSS. Работа с веб-шрифтами. Google Fonts

Первая часть главы посвящена знакомству с CSS шрифтами. На этой странице вы узнаете, как подключать шрифты в CSS, что такое веб-шрифты и как с ними работать, какие форматы шрифтов бывают, как пользоваться Google Fonts. Для начала рассмотрим легкий пример подключения шрифта CSS:

Этот небольшой кусочек кода означает, что ко всем тегам

применен шрифт Verdana. Свойство font-family устанавливает, какой шрифт или семейство шрифтов будет использоваться. Корректное отображение этого стиля в браузере пользователя зависит от того, установлен ли на его компьютере заданный шрифт. В нашем случае, если на компьютере пользователя отсутствует шрифт Verdana, то браузер отобразит шрифт, установленный по умолчанию.

В свое время дизайнерам приходилось дополнительно указывать несколько запасных шрифтов на случай, если на компьютере пользователя будет отсутствовать основной. Допустим, вы желаете оформить текст шрифтом Verdana, а в качестве запасных установить шрифты Trebuchet MS, Geneva и любой шрифт без засечек. Записывается это таким образом:

При обработке этого кода браузер сначала проверит наличие шрифта Verdana на компьютере пользователя. Если шрифт присутствует, содержимое тегов

отобразится этим шрифтом. Если шрифт отсутствует, браузер проверит наличие следующего по списку шрифта – Trebuchet MS. Если и этот шрифт отсутствует, будет проверяться наличие следующего шрифта – Geneva. Если на компьютере пользователя нет и Geneva, браузер выберет другой доступный шрифт без засечек и отобразит текст им.

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

О том, что такое шрифт с засечками (serif) и без (sans-serif), вы можете прочитать на странице Википедии.

Веб-шрифты

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

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

Итак, для отображения нужного шрифта в браузере пользователя нам необходимо, чтобы этот шрифт сам загружался на его компьютер. Осуществить это довольно просто. Такой метод подключения шрифтов к CSS открывает действительно широкие возможности перед дизайнерами. Но стоит упомянуть и о ложке дёгтя в бочке мёда: во-первых, не каждый браузер поддерживает определенный формат шрифта (что приведет к тому, что шрифт не отобразится), а во-вторых, если файл со шрифтом имеет большой вес, это может замедлить загрузку страницы.

Поддержка форматов

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

Формат файла шрифта Какие браузеры поддерживают
TTF Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0
EOT Поддерживает только Internet Explorer
WOFF Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0, Android Browser 4.1-4.3
SVG Chrome до версии 37 (включительно), Safari, iOS Safari, Android Browser

Примечание: актуальную информацию о поддержке форматов шрифтов вы всегда можете узнать на сайте caniuse.com. В строку поиска необходимо ввести название формата (например, ttf).

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

Подключаем веб-шрифт с помощью @font-face

Предположим, у вас есть свой уникальный шрифт под названием MyUniqueFont в формате TTF и вы желаете, чтобы основной текст веб-страницы отображался именно этим шрифтом. Первое, что нужно сделать, это скопировать файл шрифта в папку, где находятся все остальные файлы сайта. Чтобы не создавать беспорядок, вы можете создать отдельную папку специально для шрифтов, назвав ее, к примеру, fonts .

Далее нам необходимо дать команду браузеру загрузить шрифт MyUniqueFont . Записывается это с помощью директивы @font-face следующим образом:

Свойство font-family в данном случае играет другую роль: с помощью него мы присваиваем имя шрифту, чтобы потом использовать это имя при написании стиля:

Во второй строке указывается путь к файлу шрифта. В нашем примере файл MyUniqueFont.ttf находится в папке fonts . У вас URL-адрес может отличаться.

Шрифты Google Fonts

Компания Google дает возможность легко подключать любой шрифт из коллекции Google Fonts. Всё, что вам необходимо сделать, чтобы начать использовать понравившийся шрифт, – указать несколько настроек на странице шрифта в Google, после чего скопировать специальную ссылку на этот шрифт и добавить в ваш веб-документ.

Скриншот: интерфейс сервиса Google Fonts

Примечание: вся коллекция шрифтов от Google доступна на сайте Google Fonts. На странице можно воспользоваться различными фильтрами для поиска шрифтов по категориям, толщине, алфавиту.

Ниже мы опишем каждый шаг подключения шрифта от Google. Чтобы понимать, о чем идет речь, выберите любой шрифт со страницы Google Fonts и откройте его, нажав на кнопку Quick-use .

Шаг 1: выберите начертание

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

Шаг 2: выберите алфавит

Далее на странице есть возможность выбрать набор символов: латиница, кириллица и т. д. В зависимости от шрифта, в нем могут быть доступны не все варианты алфавита. Аналогично предыдущему пункту, лучше поставить галочку только напротив того алфавита, который понадобится.

Шаг 3: добавьте код на сайт

Далее Google предлагает подключить шрифт одним из нескольких способов: или стандартным, или через директиву @import , или с помощью JavaScript. Мы рассмотрим первые два варианта.

Первый способ подразумевает добавление в HTML-код ссылки на сервер Google, откуда и скачивается шрифт. Вам необходимо скопировать уже готовый кусок кода и поместить его между тегами в вашем HTML-документе. Пример:

Второй способ – подключение шрифта с помощью директивы @import . Готовый код находится во второй вкладке пункта 3 на странице выбранного Google-шрифта. Его нужно добавить в самое начало вашей таблицы стилей (в противном случае файл не импортируется). Выглядит код примерно так:

Особенность первого способа заключается в том, что вам понадобится добавлять ссылку на шрифт в заголовок каждой страницы, где планируется его использовать. Это легко осуществить на сайтах с небольшим количеством страниц, но проблематично для крупных ресурсов. Второй способ удобен тем, что код можно поместить в самое начало внешней таблицы стилей, и тогда все страницы, к которым подключена эта таблица, получат необходимый шрифт, который будет загружаться с помощью директивы @import .

Скриншот: этапы настройки шрифта Google

Шаг 4: создайте стиль

После осуществления предыдущих шагов можно начать применять шрифт. Как записывается такое правило CSS, вы уже видели ранее:

Если на первом шаге вы выбрали несколько вариантов начертания (к примеру, добавили вариант жирного шрифта Bold 700), тогда на третьем шаге код немного видоизменится:

Чтобы затем придать шрифту жирное начертание, запишите CSS-стиль таким образом:

Примечание: в Google Fonts для обозначения насыщенности шрифта используются только условные единицы от 100 до 900. Так, нормальное начертание (по умолчанию) эквивалентно значению 400 (normal), а стандартное полужирное начертание эквивалентно 700 (bold).

Главными преимуществами сервиса Google Fonts является:

  • легкость использования (разобраться с сервисом сможет даже новичок, а весь необходимый код генерируется автоматически – остается только скопировать его);
  • доступность шрифтов (нет необходимости за них платить);
  • предусмотрены все используемые форматы шрифтов (это означает, что каждый браузер сможет загрузить именно тот формат шрифта, с которым он работает).

Среди недостатков сервиса – не очень большое разнообразие шрифтов, особенно кириллических. К слову, в интернете есть и другие похожие сервисы, например, TypeKit (платный).

Итоги

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

CSS — Работа с текстом

На этом уроке мы познакомимся с основными приёмами для работы с текстом с помощью средств CSS.

Задавать стили CSS к тексту можно на уровне элемента body (для всей веб-страницы), элемента p (для абзаца), элемента span (для выделенного фрагмента текста) или любого другого элемента HTML.

Основные свойства CSS для работы с текстом:

1. Свойство font-size

Свойство font-size изменяет размер шрифта. Оно задаётся с помощью значения и единицы измерения ( em , px , pt , % ). Единицы измерения em и % являются относительными и зависят от размера шрифта установленного в документе. Единицы измерения px и pt являются абсолютными и их размер зависит от разрешения экрана. Также у данного свойства есть предопределенные значения small и larger , которые соответственно уменьшают или увеличивают текст по отношению к базовому.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

2. Свойство font-weight

Свойство font-weight изменяет жирность шрифта. Свойство font-weight имеет 2 часто используемых значения: normal (обычное) и bold (жирное). Остальные значения используются очень редко, перечислим их: числовые от 100 до 900 с шагом 100 (100 – самое тонкое начертание, 900 – самое жирное начертание), bolder и lighter .

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet


Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

3. Свойство font-style

Свойство font-style устанавливает тексту курсивное начертание. Оно принимает следующие значения: normal (обычное начертание шрифта), italic (курсивное начертание).

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

4. Свойство font-family

Свойство font-family изменяет шрифт или список шрифтов с помощью которых отображается текст. В качестве значений свойство font-family принимает названия шрифтов (например: font-family: «Tahoma», «Arial») или предопределенные названия группы шрифтов (serif, sans-serif, monospace, fantasy, cursive).

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

5. Свойство color

Свойство color изменяет цвет шрифта. Установить цвет можно несколькими способами: #ff0000 (шестнадцатеричное значение цвета), orange (зарезервированное название цвета), rgb(120,17,90) (RGB значение).

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

6. Свойство background-color

Свойство background-color можно использовать для выделения текста цветом, т.е. текст делается похожим на текст выделенный маркером. Установить цвет можно такими же способами, как и для свойства color.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

6. Свойство text-decoration

Свойство text-decoration можно использовать для декоративного оформления текста. В качестве значений свойства text-decoration можно использовать следующие: none (без декоративного оформления), underline (подчёркивание), overline (линия над текстом), line-through (зачёркивание), blink (эффект мигания).

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Подчёркивание также можно создать с помощью свойства CSS border .

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

7. Свойство text-transform

Свойство text-transform управляет регистром символов. В качестве значений свойства text-transform можно использовать следующие: none (по умолчанию), lowercase (переводит все символы в строчные), uppercase (переводит все символы в прописные), capitalize (каждое слово начинается с прописного символа).

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

8. Свойство white-space

При обработке текста браузер не отображает больше одного пробела между словами, а также игнорирует переносы строк, которые вы выполнили в HTML коде. При помощи свойства white-space вы можете настроить поведение браузера с помощью следующих значений: normal (по умолчанию), nowrap (не переносит текст, пока не встретит тег br ), pre (отображает текст как в коде на HTML), pre-wrap (отображает все пробелы между словами и переносит текст, если он не помещается в контейнер).

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

9. Свойство text-align

Свойство text-align предназначено для выравнивания текста в горизонтальном направлении. Значения свойства text-align указывают, что текст будет выровнен: left (по левому краю), center (по центру), right (по правому краю), justify (по ширине, т.е. одновременно по левому и правому краям).

Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.

Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.

Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.

Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.

10. Свойство vertical-align

Свойство vertical-align может использоваться для строчных элементов (в том числе для элементов со свойством display:inline-block ), ячеек таблицы, и предназначено для выравнивания текста по вертикали. Значения свойства vertical-align указывают, что текст будет выровнен: top (по верхнему краю строки), middle (по середине), bottom (по нижнему краю строки), baseline (значение по умолчанию, выравнивание по базовой линии), sub (текст отображается в виде нижнего индекса, как подстрочный), super (текст отображается в виде верхнего индекса, как надстрочный).

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet .

11. Свойство line-height

Свойство line-height предназначено для задания высоты строки, которая влияет на расстояние между строчками текста. В качестве значений свойства line-height можно использовать следующие: число (множитель по отношению к значению высоты строки по умолчанию), проценты (например: 120% от высоты строки по умолчанию), px (например: 16px), em (например: 3em), зарезервированное слово normal (автоматический расчёт высоты).

Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.

Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.

Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.

Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.

Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.

Работа с Open Type и альтернативные символы в Adobe Illustrator

В этом уроке мы рассмотрим работу с шрифтами открытого типа (OpenType fonts) в Adobe Illustrator. Этот тип шрифтов дает нам больше возможностей при работе с текстом, чем шрифты TrueType. Используя панель Glyphs и альтернативные символы, мы можем получить множество вариантов одного текста. У вас нет необходимости создавать руками причудливые завитки и орнаменты. Для получения художественного текстового эффекта вам просто нужно скомпоновать готовые символы или доверить этот процесс вашему компьютеру.

История создания OpenType и TrueType шрифтов и их сравнение

TrueType — формат компьютерных шрифтов, разработанный фирмой Apple в конце 1980-х годов. Шрифты в данном формате используются во многих современных операционных системах. Файлы с такими шрифтами имеют расширение .ttf.

OpenType — формат файла шрифтов, поддерживающий Unicode-кодировку, разработанный совместно Microsoft и Adobe для применения в различных операционных системах. OpenType обладает большими по сравнению с TrueType возможностями допечатной подготовки и поддерживает больший набор символов при меньшем размере файла. Шрифты Open Type могут включать широкий набор глифов, включая лигатуры, дроби, исторические символы (числа старого стиля). Они допускают автоматическую замену определенных символов. Шрифты OpenType могут содержать несколько вариантов оптических размеров шрифта внутри одного семейства шрифтов, при этом шрифты разного размера основываются на разных наборах векторных контуров, для улучшенного отображения на экране и повышенной читабельности символов малого размера. Файлы шрифтов имеют расширение .ttf (шрифты, основанные на TrueType) или .otf (шрифты, основанные на PostScript)

Работа с OpenType шрифтами

К сожалению, большинство бесплатных шрифтов имеют формат TrueType, то есть не имеют альтернативных символов. Однако я думаю, что в вашей операционной системе имеется достаточное количество Open Type шрифтов. При нажатии на кнопку Set the font family в панели Adobe Illustrator — Character (Window > Type > Character) вы увидите список всех шрифтов.

Перед шрифтами открытого типа находятся иконки с символом «O”

Step 1

Для работы нам понадобиться еще несколько панелей, давайте откроем их. Панель Glyphs (Type > Glyphs); OpenType (Window > Type > OpenType); Paragraph (Window > Type > Paragraph)

Берем Type Tool (T) и печатаем необходимую надпись (здесь я использовал PF Champion Script Pro и в качестве надписи использовал название моего веб сайта, которое написал в две строчки)

Step 2

Приступим к работе над нашим текстом. Сначала давайте уменьшим расстояние между стоками в панели Character.

Теперь два раза кликаем по верхней строке и выделяем всю верхнюю строку текста, устанавливаем значение First – line left intend в панели Paragraph.

Step 3

Adobe Illustrator может автоматически подбирать альтернативные символы, учитывая их положение в контексте слова. Вот как выглядит наш текст без учета контекста.

И с автоматическим подбором альтернативных символов.

Для включения этого режима предназначена кнопка Contextual Alternates в панели OpenType.

Step 4

Если в вашем тексте присутствуют сочетания букв такие, как fi, ff, ij, st, ct, fs, то вы можете превратить их в один графический символ, который носит название лигатура, нажав на соответствующие кнопки в панели OpenType.

Хочу заметить, что не все шрифты открытого типа имеют лигатурные символы.

Step 5

У некоторых OpenType шрифтов есть возможность применять альтернативные символы к первым заглавным буквам текста. Такие символы носят название Swash. Их также можно применять к последним буквам строки.

Для автоматической замены символов служит кнопка Swash в панели OpenType.

Step 6

У нас есть возможность самим подбирать нужный вид символа. Для этого выделите букву, которую вы хотите заменить, затем переходим во вкладку Alternates for Current Selection в панели Glyphs. Выберите подходящую альтернативу из сформированного списка. Так, например буква «r”, в случае использования шрифта PF Champion Script Pro, имеет 16(!) вариантов.

Я также решил заменить буквы «m” and «b”

Step 7

Расстояние между буквами «o” и «r” мне кажется слишком велико. Давайте уменьшим его. Выделяем две эти буквы, затем уменьшаем значение в панели Characters.

Step 8

Нам только осталось украсить нашу надпись орнаментом. Нет, нам не придется создавать его руками. Оказывается, огромное число орнаментов уже содержится в панели иллюстратора Glyphs. Берем Type Tool (T) и кликаем ниже нашего текста, теперь переходим во вкладку Ornaments в панели Glyphs.

Выбираем подходящий орнамент и комбинируем его с текстом.

А вот альтернативный вариант той же надписи.

Используя описанные выше техники, я создал еще одну надпись «Work hard stay humble” , в этот раз я использовал великолепный шрифт — Mon Amour Script Pro.

Надеюсь, этот урок позволит вам полюбить работу со шрифтами в Adobe Illustrator. Ведь не секрет, что многие дизайнеры не любят этот процесс. В разделе сайта «Текстовые эффекты» вы найдете много интересных уроков по работе с шрифтами и текстом в Adobe Illustrator.

Нестандартные шрифты в CSS и HTML и сжатие шрифтов с помощью fontoptimizer

В последнее время сайты перестали быть просто складом информации. С развитием HTML, CSS, Javascript, да и самих броузеров интернет-страницы превратились в полноценные дизайн-шедевры, отличающиеся хорошей типографикой.
Но что можно сделать с тем скудным набором шрифтов, которые поддерживаються всеми броузерами во всех ОС? Очень мало. Для этого и придумали такое чудо, как CSS-параметр font-face. Об этом и пойдет речь.

Содержание материала:

Зачем нужен font-face?

font-face используется для того, чтобы подключить к HTML-странице нестандартные шрифты через CSS. В большинстве современных броузеров будет отлично работать как TrueType шрифт (ttf) так и OpenType (otf). Во всех, кроме Internet Explorer. Но для них есть свой шрифт, и об этом позже.

Как подключить нестандартный ttf или otf шрифт в CSS?

В этом нет ничего сложного.
При помощи конструкции font-face в CSS мы можем указать путь к нестандартному ttf или otf файлу, проверить нет ли такого шрифта на компьютере и пользователя и указать имя шрифта, которое в дальнейшем сможем использовать в font-family. Делается это вот так:

Теперь шрифт будет доступен по заданному font-family в любом правиле css, а если такой шрифт не установлен на компьютере пользователя, то будет загружен с сервера наряду с картинками. Чтобы использовать его в своих правилах достаточно указать правильно имя:

После этого любой объект с классНеймом my_customized_font будет использовать нестандартный шрифт.
Но, как и всегда в случаях чего-то очень удобного и нестандартого, TrueType и OpenType шрифты не будут отображаться в броузерах от Microsoft.

Нестандартные шрифты средствами HTML и CSS в Internet Explorer.

К слову Internet Explorer начал поддерживать нестандартные шрифты в CSS еще с 4-й версии (сегодня актуально 8-мая, и доступна 9-тая версии!). Но при этом, как всегда, технология Microsoft отдаёт маразмом. Для того, чтобы подключить сторонний шрифт в HTML необходимо перевести его в специфический формат EOT, который сам по себе ничем не отличается от TTF или OTF, но разработан Microsoft специально для внедрения в HTML.
С точки зрения CSS подключить нестандартный шрифт в CSS так, чтобы он правильно отображался в Internet Explorer можно так:

То есть сначала нужно указать шрифт для Internet Explorer, а потом «затереть» его шрифтом для других броузеров. Когда Internet Explorer дойдет до правила с ttf или otf шрифтом, и не сможет подключить файл шрифта, он не станет изменять уже загруженный eot шрифт, в тоже время другие броузеры дойдя до второго правила с ttf шрифтом, успешно заменят шрифт качественным ttf.

Ещё один способ подключить нестандартный шрифт в IE

Internet Explorer, как известно достаточно странные броузер. Достаточно просто взглянуть на то, как именно он отображает стандартные правила CSS 2.1. У ранних версий (а именно у 6-й) есть баг в парсинге URL. Если URL в правиле CSS написать «#», то весь текст, идущий за «#» будет восприниматься как продолжение ссылки, даже если там указаны кавычки и другие мелочи. Поэтому можно подключить сторонний шрифт одним правилом font-face и для IE и для других броузеров. Вот таким образом:

Таким образом Internet Explorer загрузит только EOT шрифт, пытаясь загрузить его по ссылке css/fonts/ptsans.eot#’) format…
А другие броузеры без проблем выберут TTF шрифт, и загрузят его.

Конвертация TrueType (TTF) и OpenType (OTF) шрифтов в EOT

Об этом можно писать отдельную статью, потому, что средств сегодня достаточно много, хотя еще несколько лет назад, для этого была только одна программа, разработанная Microsoft под Windows (не доступная для пользователей других ОС).
Особого внимания заслуживает программка fontoptimizer написанная на PERL, и соответственно абсолютно кроссплатформенная.
Надо сказать, что мне доставило огромное удовольствие использоваие этой программы на моем Mac. Программа запускается прямо из терминала и позволяет не только конвертировать шрифты из ttf в eot, но сжимать их, удаляя ненужные биты и байты, и даже удаляя ненужные глифы (символы).
Скачать fontoptimizer можно здесь: fontoptimizer

Для того, чтобы сконвертировать шрифт из ttf в eot с помощью fontoptimizer достаточно вызвать в терминале (или в консоли)

Оптимизация размера файла шрифта для Web

Файлы шрифтов могут быть достаточно громоздкими. От нескольких сотен килобайт и до нескольких мегабайт. И их размер очень сильно влияет на скорость загрузки сайта. Поэтому логично оптимизировать размер шрифтов. Как? Очень просто:

  1. Удалить лишние глифы (символы) из шрифта
  2. Удалить лишнюю информацию

Это можно сделать с помощью той же утилиты fontoptimizer.
Всё что тебе понадобится это:

  1. Файл с исходным шрифтом
  2. Файл с символами, которые должны остаться в файле шрифта в кодировке UTF8

А далее все проще простого:

Где chars.txt – файл с набором символов, которые нужно оставить в файле шрифта (файл с символами обязательно должен быть в кодировке UTF8), ну а infile.ttf и outfile.ttf – входящий и выходящий файлы соответственно.
Во время тестирования с помощью fontoptimizer удалось получить из 450Kb-го файла 12Kb-й, что очень ускорило загрузку страницы.

Сервис для автоматического создания font-face, с оптимизацией и конвертацией ttf во все возможные форматы

Если лень делать все ручками, и если это не интересно или просто нет времени, то к твоим услугам отличный сервис, который сам производит оптимизацию шрифтов, конвертирует TTF в EOT, SVG, WOFF и другие форматы, которые можно загружать через font-face, и на выходе выдает архив со всеми файлами, и полностью прописанными правилами font-face для твоего шрифта. Разве не здорово?
Сервис доступен по адресу: www.fontsquirrel.com
Думаю в настройках ты разберешься 🙂

О недостатках

При всех преимуществах у подключения сторонних шрифтов на страницу есть 2 существенных недостатка:

  • во-первых, дополнительный файл шрифта – это дополнительные килобайты, и лишние секунды на загрузку
  • во-вторых, не во всех ОС есть хорошее сглаживание шрифтов (например в Windows XP оно просто ужасно), из-за чего по-настоящему красивый и качественный шрифт может выглядеть как-то не естественно и натянуто (особенно при больших кеглях). В таких случаях лучше подойдут векторные картинки SVG или растровые картинки, которые растягиваются средствами броузера, и выглядят достаточно гладко.

Дополнительные возможности «Опентайпа»

«Опентайп» — шрифтовой формат, который позволяет программировать поведение шрифта (Open Type Features).

Рассмотрим некоторые возможности «Опентайпа» на примере «Иллюстратора» и «Индизайна».

При наборе на русском языке важно убедиться, что в закладке Character (Window → Type & Tables → Character) из списка языков выбран русский, иначе некоторые фичи не будут работать.

Лигатура — символ, объединяющий две или несколько букв и составляющий один глиф. Обычно в адобовских приложениях лигатуры включены по умолчанию.

В «Индизайне» лигатуры отключаются и включаются так: Window →Type & Tables → Character → Open Type → Ligatures.

В «Иллюстраторе»: Window → Type → Open Type.

Шрифты студии, в которых есть лигатуры: Аргус, Дереза, Директ, Гросс Кунст, Хейно, Клементина, Меринг, Меццо, Мирта, Неуч.

Строчные (минускульные) цифры (old style figures) — цифры, имеющие размер строчных знаков, обычно с верхними и нижними выносными элементами.

Отключение и включение строчных цифр в «Индизайне»: Window → Type & Tables → Character → Open Type → Proportional Old Style (Tabular Old Style).

В «Иллюстраторе»: Window → Type → Open Type → Proportional Old Style (Tabular Old Style).

Строчные цифры есть в следующих шрифтах студии: Дереза, Клементина, Клинкопись, Меринг, Меццо, Мирта, Стори.

Пропорциональные цифры (Proportional Figures) имеют различную ширину кегельной площадки, которая зависит от рисунка цифры. Если не включено использование пропорциональных цифр, то по умолчанию всегда набираются табличные цифры, имеющие одинаковую ширину.

Отключение и включение пропорциональных цифр в «Индизайне»: Window → Type & Tables → Character → Open Type → Proportional Lining.

В «Иллюстраторе»: Window → Type → Open Type → Proportional Lining.

Пропорциональные цифры есть в студийных шрифтах Хейно, Меццо, Мирта и Стори.

Альтернативные знаки — варианты знаков в пределах одного начертания. Альтернативные знаки просматриваются и набираются вручную из панели Glyphs.

В «Индизайне»: Window → Type & Tables → Glyphs.

В «Иллюстраторе»: Window → Type → Glyphs.

Если у буквы есть вариант рисунка, в правом нижнем углу ее ячейки в панели Glyphs виден черный треугольник, при нажатии на который показываются альтернативные знаки (выбор — при помощи двойного клика).

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

Отключение и включение контекстуальных альтернатив в «Индизайне»: Window → Type & Tables → Character → Open Type → Contextual Alternates.

В «Иллюстраторе»: Window → Type → Open Type → Contextual Alternates.

Контекстуальные альтернативы есть у Аргуса и Клементины.

Стилистические альтернативы и комплекты

Помимо контекстуальных существуют также стилистические альтернативы и стилистические комплекты. Например, в Клинкописи есть два комплекта прописных букв: стандартный и стилистический с декоративными точками.

Выбор стилистического набора возможен только в «Индизайне»: Window → Type & Tables → Character → Open Type → Stylistic Sets.

А стилистических альтернатив — только в «Иллюстраторе»: Window → Type & Tables → Character → Open Type → Stylistic Alternates.

Шрифты студии, в которых есть стилистические альтернативы: Аргус (вариант амперсанда) и Меринг (варианты n, p, g).

Стилистические наборы есть в шрифтах Клинкопись (набор прописных с точками), Крафт (набор нескольких прописных без скосов: C, G, O, Q, Ф, Ч, Ю) и Неуч (знак @ заменяется на кошку (set2) или собаку (set1)).

Возможности «Опентайпа» в «Ворде»

Программа «Ворд» (начиная с версии 2010 года) тоже поддерживает возможности «Опентайпа».

Включение и выключение лигатур: Format → Font → Advanced.

Контекстные альтернативы включаются там же (Format → Font → Advanced) при помощи галочки Use contextual alternates.

Поддержка сложного текстового макета с использованием шрифтов OpenType на Android

Что мне хотелось бы

Я хотел бы поместить шрифт OpenType в папку моих ресурсов и использовать Typeface.createFromAsset для отображения текста Unicode в приложении для Android на языке, который использует complex текстовый макет (CTL).

Я хочу сделать это для традиционного монгольского script, но это та же проблема (так я слышу) для других языков, таких как Тайский, арабский, индийский языки и многие языки меньшинств. OpenType font уже содержит информацию, необходимую для правильного отображения текста. Проблема в том, что не все программное обеспечение поддерживает рендеринг OpenType. Некоторые из них, а другие — нет. Из того, что я могу собрать, Android не привык, но, возможно, теперь делает?

Мой вопрос

Android Lollipop сейчас нет. Есть ли поддержка шрифтов OpenType в Android?

Если все еще нет ничего легкого, тогда какой процесс? Я слышал о таких вещах, как Pango и Harfbuzz (который утверждает, что работает с Android), но я не нашел простых инструкций или руководств о том, как для их реализации. Самое близкое, что я нашел, — это Отобразить средство отображения текста, но это далеко не просто понять.

Связанные вопросы по StackOverflow

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

Что я пробовал

Я написал свой собственный механизм рендеринга для отображения традиционного монгольского текста Юникода. Но создание механизма рендеринга для определенного языка — это изобретать колесо, если есть уже имеющиеся шрифты OpenType. Кроме того, он не легко адаптируется к другим языкам.

Подключаем шрифт формата otf

Дали шрифты для подключения:

Не могу ссобразить, как их подключить-то!? Обычно я вставляю через таким макаром:

01.08.2020, 16:13

Как подключить шрифт Malina.otf?
Нужно чтобы некоторый текст на сайте отображался через шрифт Malina.otf. К html уже подключен CSS.

Новый шрифт (.otf) в программу
Я скачал крутой шрифт TROIKA и хотел бы использовать его в своей программе. 1. Как использовать.

Как открыть шрифт формата ttf в Pascal для дальнейшего его редактирования?
Как открыть шрифт формата ttf в Pascal для дальнейшего его редактирования?

Подключаем Qt к C++ 2010
Здравствуйте! Вот собственно в чем проблема. У меня есть установленный Visual Stusio 2010 тут.

Топ-пост этого месяца:  Что такое условный оператор в Python примеры использования if, else и elif
Добавить комментарий