font-feature-settings：什么是正确的语法？ [英] font-feature-settings: What is the correct syntax?

问题描述

我购买了一个支持某些开放类型功能的webfont，当然我想使用它们。

不幸的是，我在网上找不到解释使用语法的最佳方法 - 在我看来， font-feature-settings 是前缀地狱的另一个例子。

目前我写的是这样，但我不知道它是否覆盖所有支持这些功能的浏览器。

  .element {
 -webkit-font-feature-settings：kern1，liga1，case1; 
 -moz-font-feature-settings：kern = 1，liga = 1，case = 1; 
 -moz-font-feature-settings：kernon，ligaon，caseon; 
 -ms-font-feature-settings：kern1，liga1，case; 
 -o-font-feature-settings：kern，liga，case; 
 font-feature-settings：kern，liga，case; 
} 
  

更具体地说， -moz 语法似乎很奇怪。一些来源声称这是要使用的语法：

  -moz-font-feature-settings：liga = 1 ; / * Firefox 14和之前的* / 
 -moz-font-feature-settings：ligaon; / * Firefox 15 * / 
  

其他人就是这样：

  -moz-font-feature-settings：cswh = 1; 
 -moz-font-feature-settings：cswh; 
   
 
 
同样适用于 -webkit 一些写的像：
  -webkit-font-feature-settings：ligaon，dlig 
  
而其他人喜欢这样：
  -webkit-font-feature-settings：liga，dlig; 
  
或这样：
  -webkit-font-feature-settings：liga1，dlig1; 
  
顶部还有 text- rendering：optimizelegibility; code>这似乎与kern和liga相同，至少在webkit浏览器。 
 
 
 
那么，2013年在网络上使用开放式字体功能的正确方法是什么？
解决方案
好吧，查找2013网络功能应该如何工作的最佳位置是 W3 CSS3规格：
 
 
如果存在，值表示用于字形选择的索引。值必须为0或更大。值为0表示该功能被禁用。对于布尔特征，值1启用该特征。对于非布尔特征，值为1或更大值启用特征并指示特征选择索引。 on的值与1同义，off与0同义。如果省略该值，则假定值为1. 
 
 
这意味着在和上的liga1 ，liga 
 
 
 
正如BoltClock在对问题的评论中提到的，feature = value 
 
 
 
 Opera和IE（< 10）不支持 font-feature-settings 所有，因此 -o  -  * 和 -ms  -  * 属性可能无用。
 
 
 
总的来说，所有目前支持的浏览器的工作语法看起来是：
  .element {
  - webkit-font-feature-settings：kern，liga，case; / *无变化* / 
 -moz-font-feature-settings：kern = 1，liga = 1，case = 1 / * Firefox 4.0到14.0 * / 
 -moz-font-feature-settings：kern，liga，case / * Firefox 15.0以上* / 
 -moz-font-feature-settings：kern1，liga1，case1; / * Firefox 15.0以后显式设置特征值* / 
 font-feature-settings：kern，liga，case / *无变化* / 
} 
  
 
I purchased a webfont that supports some open type features and of course I want to use them.

Unfortunately, I wasn't able to find a source online that explains the best way to use the syntax - it seems to me that font-feature-settings are another example of prefix hell.  

At the moment I have it written like that but I am not sure if it covers really all browsers that support those features.
.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";
}
More specifically, the -moz syntax seems strange. Some sources claim that this is the syntax to be used:  
-moz-font-feature-settings: "liga=1";  /* Firefox 14 and before */
-moz-font-feature-settings: "liga" on; /* Firefox 15 */
Others do it simply like this:  
-moz-font-feature-settings: "cswh=1";
-moz-font-feature-settings: "cswh";
The same goes for -webkit; some write it like that:  
-webkit-font-feature-settings: "liga" on, "dlig" on;
While others do it like this:  
-webkit-font-feature-settings: "liga", "dlig";
Or like this:  
-webkit-font-feature-settings: "liga" 1, "dlig" 1;  
And on top, there is also text-rendering: optimizelegibility; which seems to be the same as "kern" and "liga", at least in webkit browsers.  

So, what is the correct, bulletproof way to use Open Type font features on the web in 2013?
解决方案
Well, the best place to look for how 2013 web features should work would be the W3 CSS3 Specification:

  
If present, a value indicates an index used for glyph selection. An  value must be 0 or greater. A value of 0 indicates that the feature is disabled. For boolean features, a value of 1 enables the feature. For non-boolean features, a value of 1 or greater enables the feature and indicates the feature selection index. A value of ‘on’ is synonymous with 1 and ‘off’ is synonymous with 0. If the value is omitted, a value of 1 is assumed.
This means that "liga" 1, "liga" on and liga all do the same thing.

As BoltClock mentioned in his comment on the question, "feature=value" isn't valid syntax, and seems to be something specific to Firefox.

Opera and IE (<10) do not support font-feature-settings at all, so the -o-* and -ms-* attributes are presumably useless.

Overall, a working syntax for all currently supported browsers would appear to be:
.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 */
}


                        
这篇关于font-feature-settings：什么是正确的语法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！