字体特征设置：正确的语法是什么？

Question

字体特征设置：正确的语法是什么？

17

我购买了一个支持某些开放类型特性的Web字体，当然我想使用它们。
不幸的是，我没有找到在线资源来解释最佳使用语法的方法 - 对我来说，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;，在Webkit浏览器中似乎与"kern"和"liga"相同。

那么，在2013年，使用Open Type字体特性的正确、可靠的方法是什么？

- Sven

1

该规范（http://www.w3.org/TR/css3-fonts/#font-feature-settings-prop）在实际属性值中没有提到“feature=value”语法，因此我猜测旧的Mozilla语法是非标准的。就草案规范而言，您提到的所有三个WebKit示例都是等效的。 - BoltClock

2个回答

1

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

需要注意的是，您不会得到一种完全可靠的方法来使用字体功能，使其能够在所有浏览器中都能正常工作。根据caniuse的说法，字体特性有些棘手的支持（Opera根本没有，IE10之前没有，大多数移动浏览器没有，剩下的部分是部分和前缀），这部分是因为它仍处于"Working Draft"状态，这意味着它仍有可能发生变化。因此，最好不要过度依赖这个功能，并且预计它在所有浏览器中都无法正常工作。

另外，既然你提到了“前缀地狱”（实际上并不那么糟糕 - 前缀本来就是为了随着时间的推移而被删除的；你知道吗，除非你被困在支持真正古老的浏览器中，否则现在根本不需要使用前缀来设置 border-radius 了？）- 你可能想要尝试一下 CSS 预处理器之一，比如 LESS 或 Sass。这些工具可以帮助你通过为你添加前缀和正确的语法来处理最新的 CSS，同时你可以使用遵循 W3C 标准的声明来保持源代码的清洁。

- Shauna

“前缀是为了随着时间的推移而被删除的。” 火狐浏览器经历了10个以上版本和6年的时间才放弃使用“-moz-border-radius”，这是一个惊人的漫长过程。 - BoltClock

根据 caniuse 的数据，Firefox 在版本 4 中已经不再需要 border-radius。未来的版本可能仍然支持它，但是它已经有一段时间不再必要了。 - Shauna

1

是的，但他们不得不继续支持它数年，因为即使在它被弃用后，未加前缀的版本仍然缺失于许多网站中，这真是遗憾。但我想，由于 Web 开发的方式，我们不能真正责怪任何一方没有正确使用前缀，导致我们今天所处的境地。 - BoltClock

@BoltClock - 这既不是浏览器开发人员的过错也不是问题，而是那些为这些网站编写CSS的人的问题。此外，说它花费了“10个版本”，虽然是真的，但有点误导人。这十个版本仅花费了13个月的时间，这实际上在任何方向上（太长或太短）更新系统来说都不是一个不合理的时间，因为这些系统本来就没有被很好地未来证明。 - Shauna

也许“-moz-border-radius”是个不太好的例子——毕竟，Mozilla并没有像WebKit那样广泛使用的前缀那么多…… - BoltClock

@BoltClock - 对你来说是个糟糕的例子，但对我回答中的原点来说却很完美。而且Webkit也有大量的非标准内容，这是他们自己的问题（他们一直以来都因为积极地将许多这些项目排除在标准之外而臭名昭著）。 - Shauna

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Donnelly · Accepted Answer

“2013年网页特性应该如何工作”的最佳参考资料是W3 CSS3 Specification：

如果存在，则值表示用于字形选择的索引。值必须为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 */
}