17

我购买了一个支持一些开放类型功能的网络字体，当然我想使用它们。
不幸的是，我无法在网上找到解释使用该语法的最佳方式的资源——在我看来，这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;

最重要的是，至少在 webkit 浏览器中， text-rendering: optimizelegibility;它似乎与"kern"and相同。"liga"

那么，2013 年在 Web 上使用 Open Type 字体功能的正确、防弹方法是什么？

4

2 回答 2

12

好吧，寻找 2013 年 Web 功能应该如何工作的最佳位置是W3 CSS3 规范：

如果存在，则值指示用于字形选择的索引。值必须为 0 或更大。值 0 表示该功能已禁用。对于布尔功能，值为 1 启用该功能。对于非布尔特征，1 或更大的值启用该特征并指示特征选择索引。“on”值与 1 同义，“off”与 0 同义。如果省略该值，则假定值为 1。

这意味着"liga" 1,"liga" on并且liga都做同样的事情。

正如 BoltClock 在他对该问题的评论中提到的那样，"feature=value"它不是有效的语法，并且似乎是 Firefox 特有的。

Opera 和 IE (<10)根本不支持font-feature-settings，所以-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 */
}
于 2013-03-01T15:34:48.080 回答
1

http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/以及规范本身可能是一个很好的起点。

还应该注意的是，您不会获得使用字体功能的完全防弹的方式，因为它可以在所有浏览器中工作。根据caniuse的说法，font-features 有一种粗略的支持（在 Opera 中什么都没有，在 IE10 之前什么都没有，在大多数移动浏览器中什么都没有，在剩下的部分和前缀中），部分原因是它仍在“工作中草稿”状态，这意味着它仍有可能改变。因此，最好不要完全依赖此功能，并期望它不会在所有浏览器中工作。

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

于 2013-03-01T15:28:00.633 回答