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" 相同，至少在webkit 浏览器中是这样。

那么，2013 年在 Web 上使用 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 (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, 这意味着它仍有可能改变。因此，最好不要完全依赖此功能，并期望它不会在所有浏览器中工作。

另一方面，既然您提到了“前缀地狱”（实际上并没有那么糟糕 - 前缀应该随着时间的推移而被删除；您是否知道您不再需要 border-radius 的前缀，除非您是坚持支持真正古老的浏览器？）-您可能想研究其中一种 CSS 预处理器，例如 LESS 或 Sass。这些工具可以通过为您添加前缀和正确的语法来帮助您使用最先进的 CSS，同时通过遵循 W3C 标准的声明来保持源代码的清洁。