Question

我购买了支持某些开放式功能的webfont，当然我想使用它们不幸的是，我无法在网上找到解释使用语法的最佳方法 - 在我看来，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"相同，至少在webkit浏览器中是这样。

那么，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的特定内容。

Opera和IE（＆lt; 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。

还应该注意的是，在所有浏览器中都可以使用font-features，你将无法获得完全无懈可击的使用方式。根据{{3}}，font-features有一种粗略的支持（在Opera中没有任何东西，在IE10之前没有任何东西，在大多数移动浏览器中没有任何内容，部分和前缀在左边），部分原因是它仍然存在在caniuse，这意味着它仍然有可能改变。因此，最好不要依赖此功能，并期望它不会在所有浏览器中都有效。

另外请注意，既然你提到了“前缀地狱”（实际上并没有那么糟糕 - 前缀意味着随着时间的推移被丢弃;你知道除了你之外你根本不需要前缀border-radius “支持真正古老的浏览器？” - 您可能想要查看其中一个CSS预处理器，例如LESS或Sass。这些工具可以通过为您添加前缀和正确的语法来帮助您使用尖端的CSS，同时使用符合W3C标准的声明保持源清洁。

font-feature-settings：正确的语法是什么？

2 个答案: