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

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

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

.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.

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

16
css css3 font-face typography webfonts

2 ответов

Ну, лучшее место, чтобы посмотреть, как 2013 веб-функций должны работы В3 С помощью CSS3 спецификации:

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

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

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

Opera и IE (не поддерживают 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 */
}
11

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

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

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

1