font-feature-settings : 올바른 구문은 무엇입니까?

Question

일부 개방형 기능을 지원하는 웹 폰을 구입했으며 물론 사용하고 싶습니다.
불행히도 구문을 사용하는 가장 좋은 방법을 설명하는 온라인 소스를 찾을 수 없었습니다. 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"과 동일합니다.

2013 년 웹에서 Open Type 글꼴 기능을 사용하려면 정확하고 방탄하지 않는 방법은 무엇입니까?

Answer 1

음, 가장 좋은 장소 2013 웹 가 작품은 W3 CSS3 Specification 될해야 기능을하는 방법을 찾기 위해 :

있는 경우는, 값이 그래프 선택에 사용되는 인덱스를 나타냅니다. 값은 0 이상이어야합니다. 값 0은 기능이 사용 불가능 함을 나타냅니다. 부울 기능의 경우 값 1을 사용하면 기능을 사용할 수 있습니다.부울이 아닌 피쳐의 경우 값이 1 이상이면 피쳐가 활성화되고 피쳐 선택 색인을 나타냅니다. 'on'의 값은 1과 같으며 'off'는 0과 같습니다. 값을 생략하면 값 1이 가정됩니다.

는

이 "liga" 1, "liga" on 및 liga 모두 같은 일을 할 수 있다는 것을 의미한다.

BoltClock이 질문에 대한 그의 의견에서 언급 한 것처럼 "feature=value"은 유효한 구문이 아니며 Firefox와 관련이있는 것으로 보입니다.

는 오페라와 IE (< 10) do not support font-feature-settings at all, 그래서 -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 */ 
} 

Answer 2

http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/은 아마도 specification itself과 마찬가지로 시작할 수있는 좋은 장소입니다.

모든 브라우저에서 사용할 수 있다는 점에서 글꼴 기능을 사용하는 완전히 방탄하지 않는 방법에 대해서도 유의해야합니다. caniuse에 따르면 font-features에는 일종의 스케치 지원이 있습니다 (Opera에서는 아무것도, IE10 이전에는 아무것도, 일부 모바일 브라우저에서는 아무것도 표시되지 않고 접두어가 붙어 있습니다). 부분적으로는 "Working Draft" status,에 있습니다. 여전히 변화 할 가능성이 있음을 의미합니다. 따라서이 기능을 아직 사용하지 않는 것이 좋습니다. 모든 브라우저에서 작동하지 않을 것으로 예상하십시오.

다른 말로하면 "접두어 hell"에 대해 언급 했으므로 (실제로 나쁜 것은 아닙니다. 접두사는 시간이 지남에 따라 삭제 될 예정이며, 더 이상 접두사가 필요하지 않다는 것을 알고 있습니까? border-radius) 진정으로 고대 브라우저를 지원합니까?) - LESS 또는 Sass와 같은 CSS 전처리 기 중 하나를 조사 할 수 있습니다. 이러한 도구는 접두사를 넣고 올바른 구문을 입력하여 최첨단 CSS를 사용할 수 있도록 도와주는 동시에 W3C 표준을 따르는 선언으로 소스를 깨끗하게 유지합니다.