问题描述
我购买了支持某些开放类型功能的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网络功能应该如何工作的最佳位置是：
这意味着在和上的liga1 ，liga
正如BoltClock在对问题的评论中提到的，feature = value
Opera和IE（< 10），因此 - 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:
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：什么是正确的语法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！