Свойство text-rendering котнтролирует настройки для 

Допустимые значения:

• auto — Браузер сам решает под какие параметры оптимизировать отображение текст. Например, под скорость, удобочитаемость или геометрическую четкость показа. Так Firefox использует optimizeLegibility для шрифтов с размером 20px и более. Для шрифтов с меньшим размером выбирается optimizeSpeed.
• optimizeSpeed — Gecko делает особый акцент на скорость отображения в ущерб удобочитаемости и геометрической четкости. Кернинг (регулирование (обычно уменьшение) горизонтального расстояния (пробела, апроша, межзнакового интервала) между определёнными парами символов для улучшения эстетического восприятия напечатанного текста) и лигатуры (печатный знак, представляющий собой комбинацию двух или трёх символов, например, знак из двух латинских строчных букв f, имеющих общую горизонтальную черту) отключены.
• optimizeLegibility — Gecko делает особый акцент на то, чтобы текст хорошо читался в ущерб скорости и геометрической четкости. Кернинг и лигатуры включены.
• geometricPrecision — Gecko делает особый акцент на геометрической четкости текста. Значение аналогично optimizeLegibility.

Свойство text-rendering доступно на платформах Windows и Linux и недоступно на Mac OS.
Gecko (Firefox) применяет свойство text-rendering для объектов и HTML, и XML.

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

Смотри также:

Краткое описание

Синтаксис:

auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit

По умолчанию:

auto

Применяется к:

элементам содержащим текст

Наследование:

Тип носителя:

визуальные

Объектная модель документа (DOM):

[элемент]. style.text-rendering

Кроссбраузерная совместимость

Internet Explorer

Firefox

Chrome

Safari

Opera

Синтаксис для функций OpenType в CSS

На этой странице мы подробно рассмотрим отдельные функции OpenType с конкретными примерами каждой из них. Более подробные сведения об использовании функций OpenType в своих веб-проектах и в CSS см. в справочном документе использование возможностей OpenType в CSS.

Лигатуры

Буквы

Числа

Стилистические наборы

Шрифты Юго-Восточной Азии

Варианты ширины

Культурные варианты

Вертикальные характеристики

Еще

Практические примеры лигатур в Warnock Pro.

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

Функция лигатур включена по умолчанию, это означает, что она должна работать без прописывания каких-либо CSS, однако в Chrome эта функция по умолчанию не включена. Кроме того, ее нельзя отключить в Safari (Mac или iOS). Также в некоторых версиях Chrome и Firefox возникают проблемы с лигатурами, содержащими пробелы.

.class {
  font-variant-ligatures: common-ligatures;
  -moz-font-feature-settings: "liga", "clig";
  -webkit-font-feature-settings: "liga", "clig";
  font-feature-settings: "liga", "clig";
}

Чтобы включить эту функцию с помощью свойства font-variant или подсвойства font-variant-ligatures, используйте значение common-ligatures, которое активирует как общие, так и контекстные лигатуры. Подобно контекстным вариантам начертания, контекстные лигатуры имеют встроенную условную логику, которая применяет глифы замены только в определенных ситуациях. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте теги функций «liga» и «clig». См. также синтаксис для использования нескольких функций OpenType.

.class {
  font-variant-ligatures: no-common-ligatures;
  -moz-font-feature-settings: "liga" 0, "clig" 0;
  -webkit-font-feature-settings: "liga" 0, "clig" 0;
  font-feature-settings: "liga" 0, "clig" 0;
}

Чтобы отключить эту функцию, используйте значение no-common-ligatures и нулевой числовой индекс для font-feature-settings.

Практический пример использования контекстных вариантов начертания в Caflisch Script Pro.

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

Функция контекстных вариантов начертания включена по умолчанию, это означает, что она должна работать без прописывания каких-либо CSS, однако в Chrome эта функция по умолчанию не включена. Кроме того, ее нельзя отключить в Safari (Mac или iOS).

.class {
    font-variant-ligatures: contextual;
    -moz-font-feature-settings: "calt";
    -webkit-font-feature-settings: "calt";
    font-feature-settings: "calt";
}

Для ее включения с помощью свойства font-variant или подсвойства font-variant-ligatures, используйте значение contextual. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «calt».

. class {
    font-variant-ligatures: no-contextual;
    -moz-font-feature-settings: "calt" 0;
    -webkit-font-feature-settings: "calt" 0;
    font-feature-settings: "calt" 0;
}

Чтобы отключить эту функцию, используйте значение no-contextual и нулевой числовой индекс для font-feature-settings.

Практический пример дополнительных лигатур в Warnock Pro.

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

.class {
  font-variant-ligatures: discretionary-ligatures;
  -moz-font-feature-settings: "dlig";
  -webkit-font-feature-settings: "dlig";
  font-feature-settings: "dlig";
}

Функция дополнительных лигатур по умолчанию отключена.

Для ее включения с помощью свойства font-variant или подсвойства font-variant-ligatures  используйте значение discretionary-ligatures. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «dlig».

Практические примеры уменьшенных заглавных в Warnock Pro.

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

.class {
  font-variant-caps: small-caps;
  -moz-font-feature-settings: "smcp";
  -webkit-font-feature-settings: "smcp";
  font-feature-settings: "smcp";
}

Функция уменьшенных заглавных по умолчанию отключена.

Для ее включения с помощью свойства font-variant  или подсвойства font-variant-caps, используйте значение small-caps. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «smcp».

Обратите внимание, что в некоторых шрифтах функция уменьшенных заглавных может включать и другие формы. Согласно спецификации OpenType, функция smcp OpenType «может включать формы, относящиеся к заглавным буквам, такие как цифры в старом стиле».

Практический пример преобразования заглавных букв в уменьшенные заглавные в Warnock Pro.

Эта функция превращает заглавные буквы в уменьшенные заглавные.

.class {
  font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "c2sc", "smcp";
  -webkit-font-feature-settings: "c2sc", "smcp";
  font-feature-settings: "c2sc", "smcp";
}

Функция преобразования заглавных букв в уменьшенные заглавные по умолчанию отключена.

Для ее включения с помощью свойства font-variant или подсвойства font-variant-caps используйте значение all-small-caps, это позволит преобразовать заглавные и строчные буквы в уменьшенные заглавные. Такой способ вполне обоснован, потому что необходимость преобразовать в уменьшенные заглавные только прописные буквы возникает редко. Для достижения аналогичного эффекта с помощью параметра font-feature-settings используйте теги функций «c2sc» и «smcp». См. также синтаксис для использования нескольких функций OpenType.

Практический пример каллиграфических начертаний в Bickham Script Pro 3.

Эта функция заменяет глифы символов по умолчанию на соответствующие глифы с каллиграфическим начертанием.

.class {
  -moz-font-feature-settings: "swsh";
  -webkit-font-feature-settings: "swsh";
  font-feature-settings: "swsh";
}

Функция каллиграфических начертаний по умолчанию отключена.

Для ее включения с помощью свойства font-feature-settings используйте тег функции «swsh». Обратите внимание, что для одного символа может использоваться несколько вариантов каллиграфического начертания. Для доступа к альтернативным вариантам каллиграфического начертания добавьте к значению числовой индекс:

.class {
  -moz-font-feature-settings: "swsh" 2;
  -webkit-font-feature-settings: "swsh" 2;
  font-feature-settings: "swsh" 2;
}

Это активирует второй доступный вариант каллиграфического начертания, если он присутствует в шрифте. Возможно, вы уже догадались, использование значения «swsh», как в нашем первом примере кода, эквивалентно использованию значения «swsh» 1.

Пока что мы пропустим свойство font-variant, поскольку его «текстовые» значения (например, каллиграфическое начертание (flowing)) сопоставляются с числовыми индексами каллиграфического начертания font-feature-value посредством определений CSS, которые пока не поддерживаются в основных браузерах.

Практический пример каллиграфических начертаний в Bree.

Эта функция заменяет глифы символов по умолчанию на стилистические варианты. См. также: стилистические варианты (ss##).

.class {
  -moz-font-feature-settings: "salt";
  -webkit-font-feature-settings: "salt";
  font-feature-settings: "salt";
}

Функция стилистических вариантов по умолчанию отключена.

Для ее включения с помощью свойства font-feature-settings используйте тег функции «salt». Обратите внимание, что для одного символа может использоваться несколько стилистических вариантов. Для доступа к другим стилистическим вариантам добавьте к значению числовой индекс:

. class {
  -moz-font-feature-settings: "salt" 2;
  -webkit-font-feature-settings: "salt" 2;
  font-feature-settings: "salt" 2;
}

Это активирует второй доступный стилистический вариант, если он присутствует в шрифте. Возможно, вы уже догадались, использование значения «salt», как в нашем первом примере кода, эквивалентно использованию значения «salt» 1.

Пока что мы пропустим свойство font-variant, поскольку его «текстовые» значения (хороших примеров здесь нет) сопоставляются с числовыми индексами стилистических вариантов font-feature-value посредством определений CSS, которые пока не поддерживаются в основных браузерах.

Практические примеры цифр, равных по высоте прописным буквам, в Warnock Pro.

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

.class {
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

Функция цифр, равных по высоте прописным буквам, по умолчанию отключена.

Для ее включения с помощью свойства font-variant или подсвойства font-variant-numeric используйте значение lining-nums. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «lnum».

Практические примеры цифр в старом стиле в Warnock Pro.

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

.class {
  font-variant-numeric: oldstyle-nums;
  -moz-font-feature-settings: "onum";
  -webkit-font-feature-settings: "onum";
  font-feature-settings: "onum";
}

Функция цифр в старом стиле по умолчанию отключена.

Для ее включения с помощью свойства font-variant или подсвойства font-variant-numeric используйте значение oldstyle-nums. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «onum».

Практические примеры пропорциональных цифр в Hypatia Sans Pro.

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

.class {
  font-variant-numeric: proportional-nums;
  -moz-font-feature-settings: "pnum";
  -webkit-font-feature-settings: "pnum";
  font-feature-settings: "pnum";
}

Функция пропорциональных цифр по умолчанию отключена.

Для ее включения с помощью свойства font-variant или подсвойства font-variant-numeric используйте значение proportional-nums. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «pnum».

Практические примеры табличных цифр в Hypatia Sans Pro.

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

.class {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

Функция табличных цифр по умолчанию отключена.

Для ее включения с помощью свойства font-variant или подсвойства font-variant-numeric используйте значение tabular-nums. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «tnum».

Практические примеры дробей в Warnock Pro.

Эта функция заменяет цифры, разделенные косой чертой, на обычные (диагональные) дроби.

.class {
  font-variant-numeric: diagonal-fractions;
  -moz-font-feature-settings: "frac";
  -webkit-font-feature-settings: "frac";
  font-feature-settings: "frac";
}

Функция дробей по умолчанию отключена.

Для ее включения с помощью свойства font-variant или подсвойства font-variant-numeric  используйте значение diagonal-fractions. Для достижения аналогичного эффекта с помощью параметров  font-feature-settings используйте тег функции «frac».

Практические примеры порядковых числительных в Warnock Pro.

Эта функция заменяет алфавитные глифы по умолчанию на соответствующие порядковые формы для использования после цифр.

. class {
  font-variant-numeric: ordinal;
  -moz-font-feature-settings: "ordn";
  -webkit-font-feature-settings: "ordn";
  font-feature-settings: "ordn";
}

Функция порядковых числительных по умолчанию отключена.

Для ее включения с помощью свойства font-variant или подсвойства font-variant-numeric  используйте значение ordinal. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «ordn».

Обратите внимание, что замена глифов после цифр происходит не всегда. Согласно спецификации OpenType, «единственным исключением из правила следования за цифрой является символ numero (U+2116), который по своей сути является заменой лигатуры, однако для доступа к нему удобнее всего использовать эту функцию».

Практические примеры стилистических наборов в Hypatia Sans Pro.

Эта функция заменяет наборы символов по умолчанию на стилистические варианты. Глифы в стилистических наборах могут обеспечивать визуальную гармоничность, взаимодействие определенным образом или иную сочетаемость. См. также: стилистические варианты (salt), эта функция позволяет использовать стилистические варианты отдельных глифов.

.class {
  -moz-font-feature-settings: "ss01";
  -webkit-font-feature-settings: "ss01";
  font-feature-settings: "ss01";
}

Функция стилистических наборов по умолчанию отключена.

Для ее включения с помощью функции font-feature-settings используйте тег функции «ss##», где «##» представляет собой любое сочетание от 01 до 20. Обратите внимание, что шрифты используют стилистические наборы совершенно произвольным и индивидуальным образом. Например, два разных шрифта могут использовать одну и ту же функцию (например, ss01) для замены совершенно разных наборов глифов; или конкретный шрифт может использовать ss01 и ss03 для замены наборов глифов, при этом игнорировать ss02. Некоторые создатели шрифтов предлагают документацию с описанием организации функций.

Пока что мы пропустим свойство font-variant, поскольку его «текстовые» значения (например, styleset(sharp-serifs)) сопоставляются с числовыми индексами стилистического набора посредством определений font-feature-value CSS, которые пока не поддерживаются в основных браузерах.

Практические примеры пропорциональной ширины в Kozuka Mincho Pr6n:

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

. class {
  font-variant-east-asian: proportional-width;
  -moz-font-feature-settings: "pwid";
  -webkit-font-feature-settings: "pwid";
  font-feature-settings: "pwid";
}

Функция пропорциональной ширины по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Для ее включения с помощью свойстваfont-variant или подсвойства  font-variant-east-asian  используйте значение proportional-width. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «pwid».

Практический пример пропорциональной чередующейся ширины в Source Han Sans:

Эта функция перемещает расстояние между глифами, рассчитанными для размещения на полную ширину, подгоняя их к индивидуальному (более или менее пропорциональному) значению ширины по горизонтали. Она отличается от функции pwid тем, что не заменяет новые глифы (GPOS, а не GSUB). Пользователь может выбрать фиксированную ширину либо просто захотеть убедиться, что глиф хорошо подогнан и не повернут по вертикали (формы латинского алфавита, предусматривающие пропорциональный интервал, будут повернуты). (Источник.)

.class {
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

Функция пропорциональной чередующейся ширины по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Единственный способ включить ее — через параметр font-feature-settings с использованием тега функции «palt».

Практические примеры пропорционального шрифта каны в Kozuka Mincho Pr6n:

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

.class {
  -moz-font-feature-settings: "pkna";
  -webkit-font-feature-settings: "pkna";
  font-feature-settings: "pkna";
}

Функция пропорционального шрифта каны по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Единственный способ включить ее — через параметр font-feature-settings с использованием тега функции «pkna».

Практические примеры полной ширины в Kozuka Mincho Pr6n:

Эта функция заменяет глифы, расположенные на другой ширине, глифами, расположенными на полной ширине (обычно em). В шрифте CJKV это может включать латинские символы нижнего ASCII и различные другие символы. В шрифте European эта функция заменяет глифы с пропорциональным интервалом моноширинными глифами, ширина которых обычно составляет 0,6 em. (Источник.)

.class {
  font-variant-east-asian: full-width;
  -moz-font-feature-settings: "fwid";
  -webkit-font-feature-settings: "fwid";
  font-feature-settings: "fwid";
}

Функция полной ширины по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Для ее включения с помощью свойства font-variant или подсвойства font-variant-east-asian используйте значение full-width. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «fwid».

Практические примеры половинной ширины в Kozuka Mincho Pr6n:

Эта функция заменяет глифы с пропорциональной шириной или фиксированной шириной, отличной от половины em, на глифы с шириной в половину em (en). Многие шрифты CJKV имеют глифы с разной шириной; эта функция выбирает версию в половину em. Существуют различные контексты, в которых такой вариант будет предпочтительным, например, для совместимости с документами на более старых настольных ПК. (Источник.)

.class {
  -moz-font-feature-settings: "hwid";
  -webkit-font-feature-settings: "hwid";
  font-feature-settings: "hwid";
}

Функция половинной ширины по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Единственный способ включить ее — через параметр font-feature-settings с использованием тега функции «hwid».

Практические примеры чередующейся половинной ширины в Kozuka Mincho Pr6n:

Эта функция перемещает расстояние между глифами, рассчитанными для размещения на полную ширину em, подгоняя их к половинному значению ширины em. Она отличается от функции hwid тем, что не заменяет новые глифы. (Источник.)

.class {
  -moz-font-feature-settings: "halt";
  -webkit-font-feature-settings: "halt";
  font-feature-settings: "halt";
}

Функция чередующейся половинной ширины по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Единственный способ включить ее — через параметр font-feature-settings с использованием тега функции «halt».

Практические примеры третьей части ширины в Kozuka Mincho Pr6n:

Эта функция заменяет глифы, расположенные на другой ширине, глифами, расположенными на третьей части ширины em. Используемые символы — это обычно цифры и некоторые формы знаков препинания. (Источник.)

.class {
  -moz-font-feature-settings: "twid";
  -webkit-font-feature-settings: "twid";
  font-feature-settings: "twid";
}

Функция третей части ширины по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Единственный способ включить ее — через параметр font-feature-settings с использованием тега функции «twid».

Практические примеры четвертой части ширины в Kozuka Mincho Pr6n:

Эта функция заменяет глифы, расположенные на другой ширине, глифами, расположенными на четвертой части ширины em (половина en). Используемые символы — это обычно цифры и некоторые формы знаков препинания. (Источник.)

. class {
  -moz-font-feature-settings: "qwid";
  -webkit-font-feature-settings: "qwid";
  font-feature-settings: "qwid";
}

Функция четвертой части ширины по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Единственный способ включить ее — через параметр font-feature-settings с использованием тега функции «qwid».

Практические примеры форм JIS78 в Kozuka Mincho Pr6n:

Эта функция заменяет японские глифы по умолчанию (JIS90) на соответствующие формы спецификации JIS C 6226-1978 (JIS78). (Источник.)

.class {
  font-variant-east-asian: jis78;
  -moz-font-feature-settings: "jp78";
  -webkit-font-feature-settings: "jp78";
  font-feature-settings: "jp78";
}

Функция форм JIS78 по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Для ее включения с помощью свойства font-variant или подсвойства font-variant-east-asian используйте значение jis78. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «jp78».

Практические примеры форм JIS83 в Kozuka Mincho Pr6n:

Эта функция заменяет японские глифы по умолчанию (JIS90) на соответствующие формы спецификации JIS X 0208-1983 (JIS83). (Источник.)

.class {
  font-variant-east-asian: jis83;
  -moz-font-feature-settings: "jp83";
  -webkit-font-feature-settings: "jp83";
  font-feature-settings: "jp83";
}

Функция форм JIS83 по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Для ее включения с помощью свойства font-variant или подсвойства font-variant-east-asian используйте значение jis83. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «jp83».

Практические примеры форм JIS90 в Kozuka Mincho Pr6n:

Эта функция заменяет японские глифы спецификации JIS78 или JIS83 на соответствующие формы спецификации JIS X 0208-1990 (JIS90). (Источник.)

.class {
  font-variant-east-asian: jis90;
  -moz-font-feature-settings: "jp90";
  -webkit-font-feature-settings: "jp90";
  font-feature-settings: "jp90";
}

Функция форм JIS90 по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Для ее включения с помощью свойства font-variant или подсвойства font-variant-east-asian используйте значение jis90. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «jp90».

Практические примеры форм JIS2004 в Kozuka Mincho Pro:

Совет по вопросам государственного языка (NLC) Японии определил новые формы глифов для ряда символов JIS, которые были включены в JIS X 0213:2004 в качестве новых прототипных форм. Функция «jp04» является подмножеством функции «nlck» и используется для доступа к этим прототипным глифам способом, который поддерживает целостность JIS X 0213:2004. (Источник.)

.class {
  font-variant-east-asian: jis04;
  -moz-font-feature-settings: "jp04";
  -webkit-font-feature-settings: "jp04";
  font-feature-settings: "jp04";
}

Функция форм JIS2004 по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Для ее включения с помощью свойства font-variant или подсвойства font-variant-east-asian используйте значение jis04. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «jp04».

Практические примеры традиционных форм в Kozuka Mincho Pr6n:

Заменяет «упрощенные» китайские формы ханзи или японские кандзи соответствующими «традиционными» формами. (Источник.)

.class {
  font-variant-east-asian: traditional;
  -moz-font-feature-settings: "trad";
  -webkit-font-feature-settings: "trad";
  font-feature-settings: "trad";
}

Функция традиционных форм по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Для ее включения с помощью свойства font-variant или подсвойства font-variant-east-asian используйте значение traditional. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «trad».

Практические примеры форм Ruby Notation в Kozuka Mincho Pr6n:

При работе с японским текстом часто используются глифы кана меньшего размера, обычно в надстрочной форме, для уточнения значения кандзи, которое может быть непонятно читателю. Их называют формами Ruby, этот термин произошел от названия старого шрифта размером в четыре пункта. Эта функция определяет глифы в шрифте, предназначенные для такого использования, и заменяет их рисунками по умолчанию. (Источник.)

.class {
  font-variant-east-asian: ruby;
  -moz-font-feature-settings: "ruby";
  -webkit-font-feature-settings: "ruby";
  font-feature-settings: "ruby";
}

Функция форм Ruby отключена по умолчанию. Для ее включения с помощью свойства font-variant или подсвойства font-variant-east-asian используйте значение ruby. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «ruby».

Обратите внимание на стилизуемый элемент rt в примере кода выше. Правильная разметка для текста ruby объясняется в спецификации W3C HTML5, в разделе о семантике текстового уровня. Также обратите внимание, что положение и размер текста ruby могут отличаться в зависимости от браузера/версии; возможно, потребуется отключить настройки браузера по умолчанию с помощью команды reset stylesheet и задавать размер/положение текста ruby вручную.

Практические примеры Horizontal Kana Alternates в Kozuka Mincho Pr6n:

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

.class {
  -moz-font-feature-settings: "hkna";
  -webkit-font-feature-settings: "hkna";
  font-feature-settings: "hkna";
}

Функция Horizontal Kana Alternates по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Единственный способ включить ее — через параметр font-feature-settings с использованием тега функции «hkna».

Практические примеры NLC Kanji Forms в Kozuka Mincho Pr6n:

Совет по вопросам государственного языка (NLC) Японии в 2000 году определил новые формы глифов для ряда символов JIS. Для доступа к этим глифам используется функция «nlck». (Источник.)

.class {
  -moz-font-feature-settings: "nlck";
  -webkit-font-feature-settings: "nlck";
  font-feature-settings: "nlck";
}

Функция NLC Kanji Forms по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Единственный способ включить ее — через параметр font-feature-settings с использованием тега функции «nlck».

Практические примеры Alternate Annotation Forms в Kozuka Mincho Pr6n:

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

.class {
  -moz-font-feature-settings: "nalt";
  -webkit-font-feature-settings: "nalt";
  font-feature-settings: "nalt";
}

Функция Alternate Annotation Forms по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Единственный способ включить ее — через параметр font-feature-settings с использованием тега функции «nalt».

Практические примеры курсива в Kozuka Mincho Pr6n:

Некоторые шрифты (например, японские шрифты Adobe Pro) будут иметь как латинские, так и курсивные формы некоторых символов в одном шрифте. Эта функция заменяет глифы римских символов на соответствующие глифы с курсивным начертанием. (Источник.)

.class {
  -moz-font-feature-settings: "ital";
  -webkit-font-feature-settings: "ital";
  font-feature-settings: "ital";
}

Функция курсива по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Единственный способ включить ее — через параметр font-feature-settings с использованием тега функции «ital».

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

. class {
  direction: rtl;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  -moz-text-orientation: upright;
  -ms-text-orientation: upright;
  text-orientation: upright;
}

Здесь наш код основывается на CSS Writing Modes Level 3 Editor’s Draft W3C, а также на результатах этого великолепного исследования Дэвида Стори (David Storey). Сейчас эта функция находится на этапе становления… однако на данный момент поддержка в браузерах попросту отсутствует. Мы протестировали приведенный выше код, и режим записи работал только в Chrome.

Эта функция корректирует расстояние между глифами для обеспечения оптической равномерности. Хотя хорошо спроектированный шрифт имеет в целом постоянный интервал между глифами, некоторые комбинации глифов требуют корректировки для улучшения разборчивости. Помимо стандартной корректировки в вертикальном направлении, эта функция может предоставлять данные кернинга в зависимости от размера через таблицы устройств, «поперечный» кернинг в направлении X текста и регулировку размещения глифов независимо от предварительной настройки. Обратите внимание, что эта функция может применяться к текстам длиной более двух глифов и не будет использоваться в моноширинных шрифтах. Также обратите внимание, что эта функция применяется только к тексту, размещенному вертикально. (Источник.)

.class {
  -moz-font-feature-settings: "vkrn", "vpal";
  -webkit-font-feature-settings: "vkrn", "vpal";
  font-feature-settings: "vkrn", "vpal";
}

Функция вертикального кернинга по умолчанию отключена, также она не поддерживается в IE и ни в одной версии Safari в Mac OS или iOS. Хотя эта функция может поддерживаться в Firefox, указанный браузер не поддерживает вертикальный текст, поэтому фактически ее поддержка отсутствует. Единственный способ включить ее — через параметр font-feature-settings с использованием тега функции «vkrn». Если тег vkrn активирован, также должен быть активирован тег vpal, если он существует. См. также: синтаксис для использования нескольких функций OpenType и примечания о вертикальных характеристиках.

Эта функция в режиме вертикального письма заменяет формы по умолчанию вариантами, настроенными для вертикального письма. Хотя большинство глифов CJKV остаются вертикальными в режиме вертикального письма, некоторые из них для этой цели принимают другую форму (обычно повернутую и переставленную). Глифы, охватываемые этой функцией, обычно соответствуют набору, поддерживающему поворот в бюджетных системах DTP. (Источник.)

Функция Vertical Alternates включена по умолчанию, это означает, что она должна работать без прописывания каких-либо CSS, однако в любой версии IE или Firefox эта функция по умолчанию не включена. Кроме того, ее нельзя включить в Safari (Mac или iOS). См. также: Примечание по вертикальным характеристикам.

.class {
  -moz-font-feature-settings: "vert";
  -webkit-font-feature-settings: "vert";
  font-feature-settings: "vert";
}

Единственный способ включить функцию Vertical Alternates — через параметр font-feature-settings с использованием тега функции «vert».

Эта функция перемещает расстояние между глифами, рассчитанными для размещения на полную высоту, подгоняя их к индивидуальному (более или менее пропорциональному) значению высоты по вертикали. Она отличается от функции valt тем, что не заменяет новые глифы (GPOS, а не GSUB). Пользователь может предпочесть моноширинную форму или может просто захотеть убедиться, что глиф хорошо подходит. (Источник.)

. class {
  -moz-font-feature-settings: "vpal";
  -webkit-font-feature-settings: "vpal";
  font-feature-settings: "vpal";
}

Функция Proportional Alternate Vertical Metrics по умолчанию отключена, также она не поддерживается в IE и ни в одной версии Safari в Mac OS или iOS. Хотя эта функция может поддерживаться в Firefox, указанный браузер не поддерживает вертикальный текст, поэтому фактически ее поддержка отсутствует. Единственный способ включить ее — через параметр font-feature-settings с использованием тега функции «vpal». См. также: Примечание по вертикальным характеристикам.

Эта функция перемещает расстояние между глифами, рассчитанными для размещения на полную высоту em, подгоняя их к половинному значению высоты em. (Источник.)

.class {
  -moz-font-feature-settings: "vhal";
  -webkit-font-feature-settings: "vhal";
  font-feature-settings: "vhal";
}

Функция Alternate Vertical Half Metrics по умолчанию отключена, также она не поддерживается ни в одной версии IE, Firefox или Safari в Mac OS или iOS. Единственный способ включить ее — через параметр font-feature-settings с использованием тега функции «vhal». См. также: Примечание по вертикальным характеристикам.

Эта функция заменяет стандартную кану формами, специально разработанными для вертикального письма. Такая оптимизация позволяет добиться лучшей подгонки и более равномерного цвета. Также см. «hkna». (Источник.)

.class {
  -moz-font-feature-settings: "vkna";
  -webkit-font-feature-settings: "vkna";
  font-feature-settings: "vkna";
}

Функция Vertical Kana Alternates по умолчанию отключена, также она не поддерживается ни в одной версии Safari в Mac OS или iOS. Единственный способ включить ее — через параметр font-feature-settings с использованием тега функции «vkna». См. также: Примечание по вертикальным характеристикам.

Практические примеры кернинга в Source Sans Pro:

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

.class {
  font-kerning: normal;
  -moz-font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  font-feature-settings: "kern";
}

Функция кернинга отключено по умолчанию, но во многих случаях важно ее включить.

Чтобы включить ее с помощью свойства font-kerning, используйте значение normal. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «kern».

Практический пример компоновки/декомпоновки глифов в Source Han Sans:

Чтобы свести к минимуму количество вариантов глифов, иногда требуется разложить символ на два глифа. Кроме того, может быть предпочтительнее объединить два символа в один глиф для более качественной обработки глифов. Эта функция допускает такую компоновку/декомпоновку. Функция должна обрабатываться первой, также она должна обрабатываться только при ее вызове. (Источник.)

Функция компоновки/декомпоновки глифов включена по умолчанию; это означает, что она должна работать без прописывания каких-либо CSS, однако здесь есть несколько хитростей. Эта функция не включена по умолчанию в Chrome или Safari, но использование любого значения font-feature-settings включит ее.

.class {
  -moz-font-feature-settings: "ccmp";
  -webkit-font-feature-settings: "ccmp";
  font-feature-settings: "ccmp";
}

Чтобы убедиться, что функция компоновки/декомпоновки глифов включена, явным образом пропишите тег функции «ccmp» или любое другое значение font-feature-settings.

Во многих скриптах, используемых для написания на нескольких языках в обширных географических регионах, были созданы локализованные варианты форм конкретных букв, которые используются отдельными литературными сообществами. Например, некоторые буквы в болгарском и сербском алфавитах имеют формы, отличные от их русских аналогов и друг от друга. В одних случаях локализованная форма лишь незначительно отличается от письменной «нормы», в других она отличается радикально. Эта функция позволяет заменять локализованные формы глифов на формы по умолчанию. (Источник.)

Функция локализованных форм включена по умолчанию, это означает, что она должна работать без прописывания каких-либо CSS, но фактически она включена по умолчанию только в Firefox и совсем не поддерживается в Safari (Mac или iOS) или на Android.

.class {
  -moz-font-feature-settings: "locl";
  -webkit-font-feature-settings: "locl";
  font-feature-settings: "locl";
}

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

Практические примеры надстрочного текста в Hypatia Sans Pro.

Эта функция заменяет цифры Lining или Oldstyle на надстрочные цифровые индексы (в основном для обозначения сносок) и заменяет строчные буквы надстрочными буквами (в основном для сокращенных французских названий).

.class {
  font-variant-position: super;
  -moz-font-feature-settings: "sups";
  -webkit-font-feature-settings: "sups";
  font-feature-settings: "sups";
}

Функция надстрочного текста по умолчанию отключена.

Для ее включения с помощью свойства font-variant или подсвойства font-variant-position используйте значение super. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «sups».

Практические примеры подстрочного текста в Warnock Pro.

Эта функция может заменить глиф по умолчанию на глиф подстрочного текста или же сочетать замену глифа с корректировкой его позиции для правильного размещения.

.class {
  font-variant-position: sub;
  -moz-font-feature-settings: "subs";
  -webkit-font-feature-settings: "subs";
  font-feature-settings: "subs";
}

Функция подстрочного текста по умолчанию отключена.

Для ее включения с помощью свойства font-variant или подсвойства font-variant-position используйте значение sub. Для достижения аналогичного эффекта с помощью параметров font-feature-settings используйте тег функции «subs».

Кернинг — это великолепный элемент типографики

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

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

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

Какое значение в оформлении текста играет кернинг

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

Отличным примером кернига может служить логотип фирмы Adidas: плотный и строгий, он внушает читателю чувство спокойствия и уверенности.

Какие виды кернинга существуют?

Кернинг можно делать, используя автоматические функции оптического (Optical) или метрического (Metric) кернинга.

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

При метрическом кернинге используются определенные пары букв, которые включают в себя большинство из существующих шрифтов. Они содержат в себе информацию о необходимом интервале между буквами в конкретных буквенных парах, таких как: Ty, Tr, Ta, To, La, Wa, Yo и т.д.

В некоторых случаях, когда применение автоматического кернинга не улучшает ситуацию, возможно использование ручного (manual) кернинга. Если навык отточен до идеала, то ручной кернинг предпочтительнее метрического или оптического. Интересная игра для оттачивания навыка — KERNTYPE.

Microsoft Word

Кернинг в «Ворде» осуществляется достаточно просто. Для того, чтобы применить кернинг, необходимо:

1. Выделить текст, который нужно изменить.
2. Пройти путь: Главная → Шрифт → Дополнительно (в 2007 «Ворде» нужно зайти в «Межзнаковый интервал»).
3. Установить галочку «Кернинг» для знаков размером и ввести в поле нужную цифру.

Свойство font-kerning в каскадных таблицах

В CSS кернинг это реализация свойства font-kerning. Синтаксис следующий:

• font-kerning: none |normal|auto|initial|inherit|unset

В случае с auto (или initial) браузер клиента самостоятельно определит, нужен кернинг или нет. Использование none запрещает браузеру применять кернинг, а normal, наоборот, говорит о том, что к тексту будет применен кернинг. Initial или unset — текст наследует значение родителя.

Кернинг для заголовка

Многие считают, что кернинг нужно применять только к крупным буквам и только к определенным буквенным парам, но так как кернинг — это способ повышения читабельности всего текста, то это мнение неверно. В американской и европейской традициях принято проставление кернинга для прописных литер, в кириллице это не автоматическая опция. До сих пор в Интернете принято набирать заголовками прописными буквами, и это атавизм. Строчные буквы обычно выглядят красивее и лучше прописных. Текст, написанный прописными литерами, хуже читается, так как человек воспринимает не само написанное слово, а его изображение.

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

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

переносы, рендеринг и дополнительные настройки

Широкая поддержка @font-face в браузерах творит чудеса в веб-типографике, давая нам возможность использовать любые шрифты по нашему усмотрению. Но разнообразие доступных шрифтов это еще не вся типографика. Существуют и другие важные вещи, которые долгое время не были реализованы в вебе, такие как правильные переносы длинных слов, а также использование дополнительных возможностей Opentype шрифтов — лигатур, кернинга, росчерков и прочих.

В этой статье мы рассмотрим некоторые из таких новых возможностей.

Переносы

Раздел можно было бы назвать “решение проблемы длинных слов, в тексте выровненном по ширине”, но это было бы не менее ужасно, чем сама проблема. Если кратко, то проблема заключается в том, что мы до сих пор не можем использовать в вебе выравнивание по ширине (text-align: justify), потому что это ужасно выглядит.

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

p {
  font-size: 2.1em;
  text-align: justify;  
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

Существуют и другие значения для hyphens: none отключит все дефисы, включая проставленные вручную, а manual оставит только дефисы, проставленные вручную с помощью ‐ (обычный дефис, выводится всегда) или ­ (мягкий дефис, выводится только при переносе — есть специальные сервисы для расстановки в тексте мягких переносов). Для того, чтобы это свойство работало у теста должен быть задан атрибут lang, а в браузер должен быть интегрирован словарь поддержки переносов. В действии это можно проверить в демо в одном из поддерживающих этот функционал браузеров.

See the Pen Hyphenation example by prgssr (@prgssr) on CodePen.

Рендеринг текста

Свойство text-rendering дает браузерному движку рендеринга информацию о том, что он должен оптимизировать при рендеринге. Доступны следующие значения:

• auto: оставляет выбор на усмотрение браузера. Оптимизироваться может скорость, четкость или геометрическая точность. В браузерах WebKit/Blink по умолчанию оптимизируется скорость, в Firefox — скорость для шрифтов не больше 20 пикселей и четкость для больших шрифтов.
• optimizeSpeed: браузер оптимизирует скорость, отключая излишние возможности типа кернинга и лигатур.
• optimizeLegibility — браузер оптимизирует четкость, реализуя все красивости, которые доступны в шрифте.
• geometricPrecision — браузер оптимизирует геометрическую точность, это значит, что некоторые аспекты шрифта, не масштабируемые линейно, будут масштабироваться более гладко при различном зуме. В Firefox это значение обрабатывается идентично optimizeLegibility.

p {
  text-rendering: optimizeLegibility;
}

Управление рендерингом шрифта доступно в Firefox, Chrome и Safari с упомянутыми выше ограничениями.

Настройка возможностей шрифтов

font-feature-settings это замечательное новое свойство, позволяющее вам управлять использованием альтернативными глифами, имеющимися внутри ваших файлов с шрифтами OTF (некоторыми из них), такими как лигатуры и росчерки.

Как узнать какие возможности шрифта доступны?

Хороший вопрос. И он достаточно сложный, так как описания шрифтов на удивление плохо передают такую информацию. К счастью, недавно эта информация стала доступна благодаря сервисам хостинга шрифтов типа Fontdeck.

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

p {
    -webkit-font-feature-settings: "dlig" 1, "kern" 1, "frac" 1;
    -moz-font-feature-settings: "dlig" 1, "kern" 1, "frac" 1;
    -ms-font-feature-settings: "dlig" 1, "kern" 1, "frac" 1;
    font-feature-settings: "dlig" 1, "kern" 1, "frac" 1;
}

Firefox и IE11 уже не нуждаются в вендорных префиксах, но я их оставил для тех, кто пользуется старыми версиями браузеров. Браузеры на основе Blink и WebKit нуждаются в префиксах, также как и Internet Explorer 10.

Рассмотрим отдельные опции, доступные при настройке возможностей шрифтов.

Лигатуры и дискретные лигатуры

Это специально стилизованные сочетания определенных букв, например, “oo” или “th”.

p {
    -webkit-font-feature-settings: "liga" 1, "dlig" 1;
    -moz-font-feature-settings: "liga" 1, "dlig" 1;
    -ms-font-feature-settings: "liga" 1, "dlig" 1;
    font-feature-settings: "liga" 1, "dlig" 1;
}

На этом изображении показан шрифт Monarcha Book на Fontdeck с активированными дискретными лигатурами (dlig).

Цифры, дроби и порядковые числительные

Существуют также отдельные опции для изменения вида цифра в шрифтах самыми разными способами. Например:

p {
    -webkit-font-feature-settings: "onum" 1, "tnum" 1, "frac" 1;
    -moz-font-feature-settings: "onum" 1, "tnum" 1, "frac" 1;
    -ms-font-feature-settings: "onum" 1, "tnum" 1, "frac" 1;
    font-feature-settings: "onum" 1, "tnum" 1, "frac" 1;
}

Я снова использую шрифт Monarcha с Fontdeck, чтобы проверить возможные настройки.

Табличные цифры (tnum) и пропорциональные (pnum), как правило, очень похожи, также как и производимый эффект от этих настроек. Табличные цифры оптимизированы для отображения в таблицах они более равномерные, четкие, с равными отступами, а пропорциональные — пропорционального размера.

Цифры старого стиля (onum) выделяются меньшей стандартизированностью, многие из них не сидят на базовой линии, у них различается высота.

В следующих примерах вы можете видеть оригинальное представление цифр на первом изображении, пропорциональное (pnum) и табличное (tnum) на втором, а на третьем цифры старого стиля (onum).

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

Строчные прописные (капитель)

Капитель это уменьшенные заглавные буквы, используемые в качестве строчных, в CSS для этого есть опция font-variant: small-caps:

p {
    -webkit-font-feature-settings: "smcp" 1;
    -moz-font-feature-settings: "smcp" 1;
    -ms-font-feature-settings: "smcp" 1;
    font-feature-settings: "smcp" 1;
}

p {
    -webkit-font-feature-settings: "pcap" 1;
    -moz-font-feature-settings: "pcap" 1;
    -ms-font-feature-settings: "pcap" 1;
    font-feature-settings: "pcap" 1;
}

Это изображение показывает уменьшенные прописные буквы (smcp) на уже привычном шрифте Monarcha Book с Fontdeck.

Кернинг

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

p {
    -webkit-font-feature-settings: "kern" 1;
    -moz-font-feature-settings: "kern" 1;
    -ms-font-feature-settings: "kern" 1;
    font-feature-settings: "kern" 1;
}

Пример сделан с шрифтом Magneta Book Italic, доступным на Fontdeck.

Стилевые наборы и прочие эффекты

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

p {
    -webkit-font-feature-settings: "ss01" 1, "swsh" 1, "cswh" 1, "calt";
    -moz-font-feature-settings: "ss01" 1, "swsh" 1, "cswh" 1, "calt";
    -ms-font-feature-settings: "ss01" 1, "swsh" 1, "cswh" 1, "calt";
    font-feature-settings: "ss01" 1, "swsh" 1, "cswh" 1, "calt";
}

• ss = стилевой набор.
• swsh = стилевой росчерк.
• cswh = контекстный росчерк.
• calt = контекстная альтернатива.

Существуют и другие настройки, но о них мы упомянем как-нибудь в другой раз.

Стилевые росчерки мы рассмотрим на примере шрифта Trilogy Fatface Regular с Fontdeck:

p {
    -webkit-font-feature-settings: "swsh" 1;
    -moz-font-feature-settings: "swsh" 1;
    -ms-font-feature-settings: "swsh" 1;
    font-feature-settings: "swsh" 1;
}

И получим следующий результат:

Стилевые наборы еще интереснее. Шрифт Majestic Mishmash содержит совершенно различные стилевые наборы:

p {
    /* standard font */
}

На изображении ниже показан этот шрифт в обычном виде (стандартном, без использования font-feature-settings):

Теперь добавим CSS:

p {
    -webkit-font-feature-settings: "ss01" 1;
    -moz-font-feature-settings: "ss01" 1;
    -ms-font-feature-settings: "ss01" 1;
    font-feature-settings: "ss01" 1;
}

И вот результат:

Советы по использованию возможностей шрифтов

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

Создавайте тестовые файлы

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

Делайте специальные наборы с нужными вам возможностями шрифтов

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

{
    font-family: 'my posh font subset';
    -webkit-font-feature-settings: "ss01" 1, "swsh" 1, "cswh" 1, "calt";
    -moz-font-feature-settings: "ss01" 1, "swsh" 1, "cswh" 1, "calt";
    -ms-font-feature-settings: "ss01" 1, "swsh" 1, "cswh" 1, "calt";
    font-feature-settings: "ss01" 1, "swsh" 1, "cswh" 1, "calt";
}

Дополнительные материалы

CSS: заглавные буквы | CSS

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

Летописцы использовали заглавные буквы в рукописях, которые писались от руки, некоторые из них относятся еще к V веку. Прописные буквы продолжали использоваться с VIII по XV век, когда типографские станки позволили вывести печать на промышленный уровень. И рукописные, и печатные буквицы размещались в начале текста. Часто их украшали декоративным рисунком, который располагался вокруг буквы.

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

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

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

Код CSS для элемента абзаца и класса, создающего букву, будет выглядеть следующим образом:

p { font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;}
.myinitialcaps {font-size:48px; font-family: Didot;}

А HTML-код будет выглядеть так:

<p><span>M</span>y initial cap is much bigger here and set in the Didot typeface.</p>

Что дает нам:

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

.myinitialcapsi {font-size:48px; font-family: Didot; margin-right:-1px;}
<p><span>I</span>n this case, there&rsquo;s some extra space between the &ldquo;I&rdquo; and &ldquo;n.&rdquo;</p> <p><span>I</span>ncluding a new class with a negative margin pulls it closer.</p>

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

Можно увеличить не только буквы в начале текста. Вы можете реализовать еще один класс, чтобы создать увеличенную версию кавычек, которые будут выводиться рядом с буквой. В нашем случае для кавычек не подходит ни класс буквы с размером 48, ни класс текста в 20 пикселей. Скорее, это будет что-то среднее — 30 пикселей. Кавычки мы подвинем вниз на 4 пикселя, чтобы оптически выровнять их с I:

.myinitialcapsq {font-size:30px; font-family: Didot; float:left; margin-top:4px;}
<p><span>&ldquo;</span><span>I</span>ncluding&rdquo; a new class with a negative margin pulls it closer.</p>

Нужно очень внимательно задавать каждую из CSS заглавных букв вместе с кавычками, чтобы их кернинг и выравнивание соответствовали окружающей разметке. Например, букву Т нужно будет сместить влево, немного за край абзаца, чтобы ее поперечная линия визуально вписывалась в макет. Аналогично нужно будет поступить и с круглыми буквами, такими как C, G, O и Q. В этом примере использованы размеры шрифтов 20, 30 и 48. Но вам нужно будет подобрать размеры, исходя из специфики шрифтов, которые вы выбрали. А также размеров и разрешений экранов, на которых будет просматриваться сайт.

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

p { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:1.2em;}
p::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;}
.initialb {margin-right:-0.1em;}
.initialn {margin-right:-0.15em;}

HTML-код, который содержит классы CSS, учитывающие кернинг букв N и B, будет выглядеть следующим образом…

<p>An inital letter, with the first letter being a capital letter.<br>
With a line break, the next line has no initial cap.</p>
<p><span>n</span>otice in the HTML source how the first letter, not a capital letter in the HTML, gets sized to the initial cap size of 3.6em. Neat, huh?</p>
<p><span>B</span>ut with a hard return, and a new paragraph started, another initial cap always gets created. You might be asking yourself, <em>How am I going to account for this? Am I supposed to have an initial cap at the beginning of very new paragraph?</em> Well, you could.  But, do you want it to look that way, and does it absolutely have to look that way?</p>
<p>В букву преобразовывается первая заглавная буква абзаца.<br>
Первая буква после разрыва строки не будет преобразовываться в заглавную.</p>
<p><span>о</span>Обратите внимание, что в исходном коде HTML первая буква не является заглавной, но она преобразуется в литеру с размером 3.6em.</p>
<p><span>О</span>Однако и после принудительного разрыва строки, ив  начале каждого нового абзаца всегда создается буква. Вы можете спросить себя: <em>Как мне учитывать это? Нужно ли мне добавлять буквы для всех этих случаев?</em> Что ж, вы можете. Но необходимо ли это?</p>

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

Добавление псевдокласса :first-child помогает решить проблему ненужного преобразования первых букв:

p { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:0.5em;}
p:first-child::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;}

Объединив этот код с HTML:

<p>Первая буква, которая определена, как first-child - это единственная буква которая преобразуется в поднятую буквицу при этом методе.</p>
<p>Так как преобразовывается только буква, определенная как first-child, обратите внимание, что этот пример отличается от предыдущего, без first-child.  Кроме этого мы не преобразуем первые буквы после начала абзаца и после принудительного разрыва строки. Это выглядит более элегантно, по сравнению с тем, как выглядел макет, когда мы преобразовали все первые буквы абзацев. </p>

Преимущество использования псевдоклассов заключается в возможности обрабатывать различные частные случаи. А что насчет недостатков? Существует много различных псевдоклассов, и их можно объединить таким количеством способов, что от этого может пойти кругом голова. Например, псевдоклассы :first-child и :first-of-type могут давать одинаковые результаты. Также можно применить псевдокласс не только к абзацу, но и к элементам <section> или <div>. Например, как показано в приведенном ниже примере с поднятым буквами в шрифте Didot. Обратите внимание, как атрибут margin был добавлен справа от буквы А. Иначе она «склеилась» бы с буквой s в начале раздела:

section { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;}
section>p:first-child:first-letter { font-size: 4em; text-transform: uppercase; font-family:Didot, serif; margin-right:5px;}

И вместе с HTML:

<section>
<p>В начале раздела для первой буквы задается поднятая буквица. </p>
<p>И новый абзац…</p>
</section>

Если вы чувствуете тягу к экспериментам, то можете исследовать различные методы в дополнение к :first-child и :first-of-type. Например, такие как :nth-of-type или :nth-of-child, чтобы посмотреть, как те или другие типы псевдоклассов можно использовать для текста заглавными буквами CSS. Независимо от того, будете ли вы следовать изложенным в этой статье принципам или начнете копать глубже, когда вы научитесь работать с псевдоклассами CSS first-child, :first-of-type и :first-letter, вы сможете правильно применять их к элементам HTML.

Использование отдельных классов вместе с псевдоклассами для обработки различных букв — это процесс проб и ошибок, вычислений положительных и отрицательных отступов. И это требует большого терпения. Для таких букв, как F, G, O, P, Q, T, W, V и Y также потребуются отдельные классы кернинга.

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

Дайте знать, что вы думаете по этой теме материала в комментариях. За комментарии, дизлайки, подписки, отклики, лайки низкий вам поклон!

Вадим Дворниковавтор-переводчик статьи «Making Initial Letters Part I: Raised Initials»

letter-spacing — CSS: Каскадные таблицы стилей

Свойство CSS letter-spacing задает поведение горизонтального интервала между текстовыми символами. Это значение добавляется к естественному интервалу между символами при рендеринге текста. Положительные значения межбуквенного интервала приводят к тому, что символы расходятся дальше друг от друга, а отрицательные значения межбуквенного интервала сближают символы.

 
межбуквенный интервал: нормальный;


межбуквенный интервал: 0.3эм;
межбуквенный интервал: 3px;
межбуквенный интервал: .3px;


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

Значения

нормальный

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

<длина>

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

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

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

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

شسيبتنمك

Установка интервала между буквами

HTML

  
расстояние между буквами
расстояние между буквами
расстояние между буквами
расстояние между буквами
расстояние между буквами
  

УСБ

  .normal { интервал между буквами: нормальный; }
. em-wide { межбуквенный интервал: 0,4 em; }
.em-wider { межбуквенный интервал: 1em; }
.em-tight { межбуквенный интервал: -0.05em; }
.px-wide { межбуквенный интервал: 6px; }
  

Результат

Таблицы BCD загружаются только в браузере

font-kerning | CSS-трюки — CSS-трюки

Свойство CSS font-kerning определяет способ размещения определенных пар букв.

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

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

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

Синтаксис

  кернинг шрифта: авто | нормальный | нет  

• Начальное значение: AUTO 00
• 0
• 0
• Все элементы
• Унаследовано: 00
• Вычисленное значение:
• Тип анимации: Дискретный 0

Значения

font-kerning принимает следующие значения:

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

Демо

Поддержка браузера

Desktop

Мобильный / планшет

Android Chrome	Android Firefox	Android	iOS Safari
97	96	4. 4*	8*

Родственные свойства

CSS шрифт-кернинг

<стиль> дел { семейство шрифтов: Lato; вес шрифта: 900; размер шрифта: 17vw; } .без кернинга { кернинг шрифта: нет; } .кернинг { кернинг шрифта: нормальный; }

Свойство font-kerning используется для контекстной настройки интервала между глифами.

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

К нижнему слову применен кернинг. Обратите внимание, что в нем гораздо более равномерное распределение пробелов между всеми тремя буквами, чем в верхнем примере (в котором не применялся кернинг).

Некоторые символы могут вызывать проблемы с пробелами, которые проявляются только в сочетании с другим потенциально проблемным символом. Пары букв, которые чаще всего нуждаются в кернинге, как правило, представляют собой комбинации символов верхнего и нижнего регистра, а также пары, содержащие знаки препинания. Таким образом, такие пары, как «To», «Te», «Ve», «w.» и т. д., являются хорошими кандидатами на кернинг.

Обратите внимание, что проблема возникает не из-за одного символа. Проблема заключается в паре . Хотя у определенного персонажа могут быть проблемы с интервалами, эти проблемы будут проявляться только в сочетании с некоторыми другими персонажами.Например, заглавная пара «AV» часто вызывает проблемы, а «AI» — нет. Таким образом, такие слова, как «ДОСТУПЕН», могут выглядеть немного неравномерно из-за своего интервала.

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

Свойство font-kerning не будет иметь видимого эффекта при использовании шрифтов, не содержащих никаких данных кернинга.

Синтаксис

Синтаксис свойства font-kerning :

кернинг шрифта: авто | нормальный | нет

Возможные значения

авто

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

обычный

Указывает, что кернинг применяется.

нет

Указывает, что кернинг не применяется.

Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

начальный

Представляет значение, указанное как начальное значение свойства.

унаследовать

Представляет вычисленное значение свойства родительского элемента.

снято с охраны

Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

Общая информация

Исходное значение

авто

Применяется к

Все элементы

Унаследовано?

Да

СМИ

Визуальный

Анимация?

№

Пример кода

тело { кернинг шрифта: авто; } ч2. особенность { кернинг шрифта: нормальный; }

Официальные характеристики

Префиксы поставщиков

Для максимальной совместимости с браузерами многие веб-разработчики добавляют свойства для конкретных браузеров, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- . для Firefox, -o- для более старых версий Opera и т. д. Как и в случае любого свойства CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

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

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

Многие разработчики используют Autoprefixer, постпроцессор для CSS.Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.

Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

font-kerning · WebPlatform Docs

Резюме

Свойство font-kerning позволяет контекстуально регулировать интервалы между глифами, т. е. пробелы между символами в тексте. Это свойство управляет метрическим кернингом, который использует данные настройки, содержащиеся в шрифте.Оптический кернинг пока не поддерживается.

Обзорная таблица

Исходное значение

авто

Относится к

все элементы

Унаследовано

Да

СМИ

визуальный

Расчетное значение

как указано

Анимируемый

Нет

Свойство объектной модели CSS

шрифт

Проценты

Н/Д

Синтаксис

• кернинг шрифта: авто
• кернинг шрифта: нет
• кернинг шрифта: обычный

Значения

авто

Используется для указания кернинга на усмотрение пользовательского агента.

обычный

Указывает, что применяется кернинг. Этот параметр не влияет на шрифты, не содержащие данных кернинга.

нет

Указывает, что кернинг не применяется

Примеры

• Кернинг будет виден, только если поддерживается.

  
ВАВАВАВАВАВАВАВАВА
ВАВАВАВАВАВАВАВАВАВАВАВАВАВАВАВАВА
  

Посмотреть живой пример

• Кернинг будет виден, только если поддерживается.

  html { размер шрифта: 62,5%; }
p { семейство шрифтов: "Arial", serif; размер шрифта: 3.6rem }
p.normal {Кернинг шрифта: нормальный;}
p.none {Кернинг шрифта: нет;}
  

Посмотреть живой пример

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

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

Примечания

Данные кернинга необходимы для того, чтобы это свойство вступило в силу. При рендеринге шрифтов OpenType спецификация opentype указывает, что кернинг включен по умолчанию. Когда кернинг включен, функция OpenType kern включена. vkern используется для вертикального текста.Пользовательские агенты также должны поддерживать кернинг с помощью данных, содержащихся в таблице шрифтов kern , как подробно описано в спецификации OpenType. При использовании в сочетании с letter-spacing корректировка кернинга считается частью интервала по умолчанию, а корректировка межбуквенного интервала выполняется после применения кернинга.

Связанные характеристики

Модуль шрифтов CSS, уровень 3

Рекомендация кандидата W3C

См.

Связанные статьи

Шрифт CSS

Шрифты

CSS шрифт-кернинг — Dofactory

Кернинг — расстояние между буквами.Это часть файла шрифта.

Это может сделать текст более легким и приятным для чтения.

Свойство font-kerning включает кернинг.

Две строки текста: одна с шрифтом , другая без шрифта . Обратите внимание, как слово «Текст» в первой строке выглядит более сбалансированным , чем во второй строке.

Текст с кернингом шрифта.

Текст без кернинга шрифта.

  <стиль>
  .кернинг {
    кернинг шрифта: нормальный;
    семейство шрифтов: с засечками;
    размер шрифта: 50px;
  }

  .nokerning {
    кернинг шрифта: нет;
    семейство шрифтов: с засечками;
    размер шрифта: 50px;
  }


Текст с кернингом шрифта.
Текст без кернинга шрифта.
  

Примечание : не все шрифты содержат информацию о кернинге.

кернинг шрифта: авто | нормальный | никто;
 

Значения	Описание
авто	По умолчанию.Браузер определяет, полезен ли кернинг шрифтов или нет.
обычный	Применяется кернинг шрифта.
нет	Кернинг шрифта не применяется.

---

В этой таблице показано, когда для каждого браузера была запущена поддержка font-kerning .

Хром	32.0	Янв 2014
Фаерфокс	34,0	декабрь 2014 г.
IE/пограничный	10,0	сен 2012
Сафари	7.0	окт 2013

---

Типографика CSS: кернинг, лигатуры, росчерки и маленькие заглавные буквы

Как только вы найдете шрифт с нужными вам эстетическими характеристиками, также проверьте, можете ли вы легально использовать этот шрифт в Интернете . Беглый взгляд на лицензию для Ponsi Rounded Slab, к сожалению, показывает, что она не лицензирована для использования в Интернете с @font-face. По крайней мере, не бесплатно.Если вам особенно нравится Ponsi Rounded Slab, вы всегда можете связаться с Font Spring для дальнейшего изучения законного использования.

Несмотря на то, что в Font Spring есть несколько хороших полнофункциональных шрифтов, нам посчастливилось найти на Behance потрясающие семейства шрифтов напрямую от их создателей. Чтобы назвать лишь некоторые из тех, в которые мы влюбились, есть Argent, Quincy и Calendas Plus. В Google Fonts также есть несколько шрифтов, доступных по крайней мере с некоторыми встроенными лигатурами, хотя вы можете потратить некоторое время на поиск (попробуйте изменить текст предварительного просмотра на «fi ff fk», чтобы найти шрифты с лигатурами).

Подготовка файлов шрифтов для Интернета

Когда у вас есть шрифт, который подходит вам как с эстетической, так и с юридической точки зрения, вы можете перейти к подготовке файлов шрифтов для Интернета (если это еще не веб-шрифт, например, из Google Fonts или TypeKit). Итак, загвоздка всех этих функций OpenType в том, что они доступны только при работе с типом файла шрифта OpenType (.otf). Swash, чередование стилей и другие вариации шрифта не будут работать с другими типами файлов шрифтов: eot, woff, svg или ttf. По крайней мере, они не будут по умолчанию.

Вофф спешит на помощь

Большим спасением здесь является тип файла woff, который может использовать все те же функции шрифта, что и файлы .otf, если файл woff экспортируется правильно. Чтобы правильно экспортировать ваш woff (и woff2):

1. Откройте генератор веб-шрифтов Font Squirrel
2. Загрузите версию выбранного шрифта в формате .otf
3. Вход в режим оптимизации шрифтов «Эксперт»
4. (Необязательно) Ограничьте типы файлов шрифтов. В настоящее время Woff и Woff2 покрывают большую часть ваших баз.
5. В разделе Функции OpenType используйте Список функций Запятая , чтобы отметить все функции, которые вы хотели бы сохранить в своем шрифте.Вы можете использовать Keep All Features , но имейте в виду, что больше функций означает больший файл шрифта.
6. ВЫ МОЖЕТЕ ЗАКОННО ИСПОЛЬЗОВАТЬ ЭТОТ ШРИФТ, ПРАВИЛЬНО?
7. Загрузите комплект

Пример:

Для Исторической ассоциации Белого дома мы использовали Calendas Plus. Мы решили использовать лигатуры, росчерки и маленькие заглавные буквы из шрифта, поэтому я ввел «liga, swsh, smcp» в качестве списка запятых. Большинство других настроек по умолчанию лучше оставить в покое. Вот краткое изложение всех настроек, с которыми я экспортировал файлы шрифтов:

.

Кернинг шрифта — CSS — W3cubDocs

CSS-свойство font-kerning задает использование информации о кернинге, хранящейся в шрифте.

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

Например, на изображении ниже в примерах слева не используется кернинг, а в примерах справа используется:

Синтаксис

 кернинг шрифта: авто;
кернинг шрифта: нормальный;
кернинг шрифта: нет;


кернинг шрифта: наследовать;
кернинг шрифта: начальный;
кернинг шрифта: вернуться;
кернинг шрифта: не установлен;
 

Значения

auto

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

обычный

Должна применяться информация о кернинге шрифта, хранящаяся в шрифте.

нет

Информация о кернинге шрифта, хранящаяся в шрифте, отключена.

Формальное определение

Формальный синтаксис

 авто | нормальный | нет 

Примеры

Включение и отключение кернинга

HTML

 

<дел>
АВ Т.ij
 

CSS

 раздел {
  размер шрифта: 2rem;
  семейство шрифтов: с засечками;
}

#нокерн {
  кернинг шрифта: нет;
}

#керн {
  кернинг шрифта: нормальный;
}
 

JavaScript

 let input = document.getElementById('input');
пусть kern = document.getElementById('kern');
пусть nokern = document. getElementById('nokern');

input.addEventListener («клавиша», функция () {
  kern.textContent = input.value;
  nokern.textContent = input.value;
});

керн.текстовое содержимое = ввод.ценность;
nokern.textContent = input.value;
 

Технические характеристики

Совместимость с браузером

	Рабочий стол						Мобильный
	Хром	Край	Firefox	Internet Explorer	Опера	Сафари	Веб-просмотр Android	Хром Android	Firefox для Android	Опера Android	Сафари на IOS	Самсунг Интернет
шрифт-кернинг	33 29-33	79	32	№	20 16-20	9 6	4.4.3 4. No related posts. alexxlab Разное Как часто можно делать клизму грудничку: рекомендации педиатров alexxlab 22.11.2024 0 Разное Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы alexxlab 19.11.2024 0 Разное Как успокоить плачущего ребенка: 10 эффективных способов alexxlab 16.11.2024 0 Разное Что нужно новорожденному на первое время: полный список необходимых вещей alexxlab 14.11.2024 0 Разное Пеленки для новорожденных: виды, размеры и способы использования alexxlab 13.11.2024 0 Разное Детская кроватка для новорожденного: как правильно выбрать alexxlab 10.11.2024 0 Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт