ustawienia font-feature: Jaka jest prawidłowa składnia?

Question

Kupiłem webfont, który obsługuje niektóre funkcje typu otwartego i oczywiście chcę z nich korzystać.
Niestety, nie udało mi się znaleźć źródła online, które wyjaśnia najlepszy sposób użycia składni - wydaje mi się, że kolejny przykład piekła prefiksowego to font-feature-settings.

W tej chwili mam napisane tak, ale nie jestem pewien, czy obejmuje ona naprawdę wszystkie przeglądarki, które obsługują te funkcje.

.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"; 
} 

Dokładniej, składnia -moz wydaje się dziwna. Niektóre źródła twierdzą, że to jest składnia do wykorzystania:

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

Inni robią to po prostu tak:

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

To samo dotyczy -webkit; niektóre napisać to tak:

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

Podczas gdy inni robią to tak:

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

Albo tak:

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

A na górze, jest też text-rendering: optimizelegibility; który wydaje się być taki sam jak "kern" i "liga", przynajmniej w przeglądarkach webkit.

Jaki jest więc poprawny, kuloodporny sposób korzystania z funkcji czcionek Open Type w Internecie w 2013 roku?

Answer 1

Cóż, najlepszym miejscem do poszukiwania jak 2013 web wyposażony powinny praca byłaby W3 CSS3 Specification:

Jeśli obecna wartość wskazuje indeks używany do wyboru glifów. Wartość musi wynosić 0 lub więcej. Wartość 0 wskazuje, że funkcja jest wyłączona. W przypadku funkcji logicznych wartość 1 włącza tę funkcję.W przypadku funkcji innych niż boolowskie wartość 1 lub większa włącza tę funkcję i wskazuje indeks wyboru funkcji. Wartość "on" jest synonimem 1, a "off" jest synonimem 0. W przypadku pominięcia wartości przyjmowana jest wartość 1.

Oznacza to, że "liga" 1, "liga" on i liga wszystkim zrobić to samo.

Jak wspomniał BoltClock w swoim komentarzu do tego pytania, "feature=value" nie jest prawidłową składnią i wydaje się być specyficznym dla Firefoksa.

opera IE (< 10) do not support font-feature-settings at all, tak -o-* i -ms-* cechy przypuszczalnie bezużyteczne.

Ogólnie rzecz biorąc, składnia pracy dla wszystkich obecnie obsługiwanych przeglądarek wydaje się być:

.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 */ 
} 

Answer 2

http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/ będzie prawdopodobnie dobrym miejscem do rozpoczęcia, a także specification itself.

Należy również zauważyć, że nie można uzyskać w pełni kuloodpornego sposobu korzystania z funkcji czcionek w tym sensie, że działa on we wszystkich przeglądarkach. Zgodnie z wersją caniuse, funkcje czcionek mają rodzaj szkicowej obsługi (nic w ogóle w Opera, nic przed IE10, nic w większości przeglądarek mobilnych, częściowe i prefiksowane w tym, co zostało), częściowo z powodu tego, że wciąż jest w "Working Draft" status,, co oznacza, że ​​wciąż jest szansa, że ​​się zmieni. Dlatego dobrze byłoby nie polegać na tej funkcji i oczekiwać, że po prostu nie będzie działać we wszystkich przeglądarkach.

Inna uwaga, ponieważ wspomniałeś "piekło prefiksowe" (co tak naprawdę nie jest takie złe - prefiksy mają zostać usunięte z czasem, czy wiesz, że nie potrzebujesz już żadnych prefiksów dla border-radius, chyba że utkniesz obsługa naprawdę starożytnych przeglądarek?) - możesz zajrzeć do jednego z preprocesorów CSS, takich jak LESS lub Sass. Narzędzia te mogą pomóc w tworzeniu najnowocześniejszych arkuszy stylów CSS poprzez wstawianie prefiksów i poprawianie składni, a jednocześnie zachować czystość źródła dzięki deklaracjom zgodnym ze standardami W3C.