Font-feature-settings: Каков правильный синтаксис?

Я купил webfont, который поддерживает некоторые функции открытого типа и, конечно же, я хочу их использовать.
К сожалению, я не смог найти источник в Интернете, который объясняет лучший способ использования синтаксиса - мне кажется, что font-feature-settings - еще один пример префикса ада.

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

.element {
    -webkit-font-feature-settings: "kern" 1, "liga" 1, "case" 1;
       -moz-font-feature-settings: "kern=1", "liga=1", "case=1";
       -moz-font-feature-settings: "kern" on, "liga" on, "case" on;
        -ms-font-feature-settings: "kern" 1, "liga" 1, "case";
         -o-font-feature-settings: "kern", "liga", "case";
            font-feature-settings: "kern", "liga", "case";
}

Более конкретно, синтаксис -moz кажется странным. Некоторые источники утверждают, что это синтаксис, который будет использоваться:

-moz-font-feature-settings: "liga=1";  /* Firefox 14 and before */
-moz-font-feature-settings: "liga" on; /* Firefox 15 */

Другие делают это просто так:

-moz-font-feature-settings: "cswh=1";
-moz-font-feature-settings: "cswh";

То же самое относится к -webkit; некоторые пишут так:

-webkit-font-feature-settings: "liga" on, "dlig" on;

В то время как другие делают это так:

-webkit-font-feature-settings: "liga", "dlig";

Или вот так:

-webkit-font-feature-settings: "liga" 1, "dlig" 1;

И сверху также есть text-rendering: optimizelegibility;, который, похоже, совпадает с "kern" и "liga", по крайней мере, в браузерах webkit.

Итак, каков правильный пуленепробиваемый способ использования шрифтов Open Type в Интернете в 2013 году?

ОТВЕТЫ

Ответ 1

Хорошо, лучшее место для поиска того, как работают веб-функции 2013 года, будет Спецификация W3 CSS3:

Если присутствует, значение указывает индекс, используемый для выбора глифа. Значение должно быть 0 или больше. Значение 0 указывает, что функция отключена. Для булевых функций значение 1 позволяет использовать эту функцию. Для небулевых функций значение 1 или больше позволяет использовать эту функцию и указывает индекс выбора функции. Значение 'on является синонимом 1 и' off является синонимом 0. Если значение опущено, предполагается значение 1.

Это означает, что "liga" 1, "liga" on и liga все делают то же самое.

Как упоминал BoltClock в своем комментарии к вопросу, "feature=value" является недопустимым синтаксисом и, похоже, что-то особенное для Firefox.

Opera и IE (< 10) вообще не поддерживают font-feature-settings, поэтому атрибуты -o-* и -ms-* предположительно бесполезный.

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

.element {
    -webkit-font-feature-settings: "kern", "liga", "case"; /* No variation */
       -moz-font-feature-settings: "kern=1", "liga=1", "case=1"; /* Firefox 4.0 to 14.0 */
       -moz-font-feature-settings: "kern", "liga" , "case"; /* Firefox 15.0 onwards */
       -moz-font-feature-settings: "kern" 1, "liga" 1, "case" 1; /* Firefox 15.0 onwards explicitly set feature values */
            font-feature-settings: "kern", "liga", "case"; /* No variation */
}

Ответ 2

http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/, вероятно, будет хорошим местом для начала, а также .

Следует также отметить, что вы не получите полностью пуленепробиваемый способ использования шрифтовых функций в том смысле, что он будет работать во всех браузерах. Согласно caniuse, функции шрифта имеют некоторую отрывочную поддержку (ничего в Opera, ничего до IE10, ничего в большинстве мобильные браузеры, частичные и префиксные в том, что осталось), частично из-за того, что он все еще находится в "Рабочий проект" ,, что означает, что все еще есть шанс он изменится. Поэтому было бы неплохо еще не зависеть от этой функции и ожидать, что она просто не будет работать во всех браузерах.

В другой заметке, поскольку вы упоминали "префиксный ад" (что на самом деле не так уж и плохо), префиксы должны быть удалены с течением времени, знаете ли вы, что вам больше не нужны префиксы для border-radius, если вы не используете застряли в поддержке по-настоящему древних браузеров?) - вы можете посмотреть в один из препроцессоров CSS, таких как LESS или Sass. Эти инструменты могут помочь вам с передовым CSS, вставив в себя префиксы и правильный синтаксис для вас, в то время как вы сохраните свой источник с декларациями, которые следуют стандартам W3C.