font-feature-settings: Cú pháp chính xác là gì?

Question

Tôi đã mua một webfont hỗ trợ một số tính năng kiểu mở và tất nhiên tôi muốn sử dụng chúng.
Thật không may, tôi không thể tìm thấy nguồn trực tuyến giải thích cách tốt nhất để sử dụng cú pháp - dường như với tôi rằng font-feature-settings là một ví dụ khác về địa ngục tiền tố.

Hiện tại tôi đã viết như vậy nhưng tôi không chắc liệu nó có thực sự bao gồm tất cả các trình duyệt hỗ trợ các tính năng đó hay không.

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

Cụ thể hơn, cú pháp -moz có vẻ lạ. Một số nguồn tin cho rằng đây là cú pháp được sử dụng:

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

khác làm điều đó chỉ đơn giản như thế này:

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

Cũng vậy với -webkit; một số viết nó như thế:

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

khi những người khác làm điều đó như thế này:

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

Hoặc như thế này:

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

Và trên đầu, đó cũng là text-rendering: optimizelegibility; mà có vẻ là giống như "kern" và "liga", ít nhất trong các trình duyệt webkit.

Vậy, cách nào đúng, cách chống đạn để sử dụng các tính năng phông chữ Open Type trên web vào năm 2013?

Answer 1

Vâng, nơi tốt nhất để tìm cách tính năng 2013 web nên công việc sẽ là W3 CSS3 Specification:

Nếu hiện tại, một giá trị chỉ ra một chỉ số được sử dụng để lựa chọn hình tượng. Giá trị phải bằng 0 hoặc lớn hơn. Giá trị bằng 0 cho biết tính năng bị tắt. Đối với các tính năng boolean, giá trị 1 cho phép tính năng này.Đối với các đối tượng không phải là boolean, giá trị 1 hoặc lớn hơn sẽ bật tính năng này và cho biết chỉ mục lựa chọn tính năng. Giá trị ‘on’ đồng nghĩa với 1 và ‘off’ đồng nghĩa với 0. Nếu giá trị bị bỏ qua, giá trị của 1 được giả định.

Điều này có nghĩa là "liga" 1, "liga" on và liga tất cả đều làm tương tự.

Như BoltClock đã đề cập trong nhận xét của anh ấy về câu hỏi, "feature=value" không phải là cú pháp hợp lệ và dường như là một cái gì đó cụ thể đối với Firefox.

Opera và IE (< 10) do not support font-feature-settings at all, vì vậy các thuộc tính -o-* và -ms-* có lẽ là vô ích.

Nhìn chung, một cú pháp làm việc cho tất cả các trình duyệt hiện nay hỗ trợ sẽ xuất hiện để được:

.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/ có lẽ sẽ là một nơi tốt để bắt đầu, cũng như specification itself.

Cũng cần lưu ý rằng bạn sẽ không nhận được cách thức chống đạn hoàn toàn bằng cách sử dụng các tính năng phông chữ theo ý nghĩa rằng nó sẽ hoạt động trên tất cả trình duyệt. Theo số caniuse, tính năng phông chữ có kiểu hỗ trợ sơ sài (không có gì trong Opera, không có gì trước IE10, không có gì trong hầu hết các trình duyệt di động, một phần và tiền tố trong phần còn lại), một phần do nó vẫn ở trong "Working Draft" status, có nghĩa là vẫn có cơ hội thay đổi. Vì vậy, nó sẽ là một ý tưởng tốt để không phụ thuộc vào tính năng này khá được nêu ra, và hy vọng rằng nó sẽ không hoạt động trong tất cả các trình duyệt.

Lưu ý khác, vì bạn đã đề cập "tiền tố địa ngục" (thực ra không phải là tiền tố xấu có nghĩa là bị bỏ qua theo thời gian; bạn có biết bạn không còn cần tiền tố cho border-radius trừ khi bạn bị kẹt hỗ trợ các trình duyệt thực sự cổ đại?) - bạn có thể muốn xem xét một trong các bộ tiền xử lý CSS, chẳng hạn như LESS hoặc Sass. Những công cụ này có thể giúp bạn với CSS tiên tiến bằng cách đặt vào các tiền tố và cú pháp chính xác cho bạn, trong khi bạn giữ cho nguồn của bạn sạch sẽ với các khai báo tuân theo các tiêu chuẩn W3C.