如何访问 CSS 中的字体功能？答案

【问题标题】：How do I access font features in CSS?如何访问 CSS 中的字体功能？
【发布时间】：2011-07-23 15:27:16
【问题描述】：

我希望在网站上使用一种字体，我需要访问各种替代字体功能（具体来说，这里选择的功能：http://myfonts.us/uOmsiF）。

我知道 mozilla 有 -moz-font-feature-settings css 功能，但我还需要两件事：

我更喜欢使用 CSS 解决方案，但如果有其他一些可能适用于大多数平台的基于 javascript 的方法，我肯定会使用它。

编辑：我刚刚找到了 OpenType 规范：http://www.fontfont.com/opentype/FF_OT_UserGuide_v2.pdf 以及 CSS3 草案：http://dev.w3.org/csswg/css3-fonts/#font-variant-alternates-prop 编辑 2：我的解决方案是在 xelatex 中创建文本，然后将其转换为 SVG。显然，这不是处理大量文本的解决方案，但适用于文本徽标。

【问题讨论】：

【解决方案1】：

目前，除了 Firefox 4 之外，没有其他浏览器支持 font-feature-settings（即使这样，它也使用 Mozilla 供应商扩展）。不过，CSS3 Fonts module 记录了该属性，因此由于它是 CSS3 的一部分，其他浏览器最终应该支持它。

我不确定是否有任何基于 JavaScript 的解决方案。

【讨论】：

【解决方案2】：

现在在 IE/Trident 中也是如此（IE10 平台预览版）。

感谢能够在网络上进行真正的排版。

【讨论】：

【解决方案3】：

正如 sideshowbarker 所说，CSS font-feature-settings 现在得到了更广泛的支持。它们可以使用所有众所周知的供应商前缀来完成：

很遗憾，Safari 尚不支持它们。 IE 9 及以下版本也不支持它们。根据 StatsCounter，截至 2012 年 11 月 26 日，这将使不支持它的浏览器占 34% 左右。这是一个相当大的利润，但它一直在下降。

就个人而言，我现在会使用图像而不是字体。 34％的东西是相当大的数量。如果我在购物时发现 34% 的吃过它的人不喜欢它，我不会买它。

但是，如果您真的想使用font-feature-settings，那么我推荐这个article by Font Deck 或this one，它们实际上是这些功能。

虽然你似乎已经回答了你的问题，但我只是想我会扩展这个话题。 sideshowbarker 有一些很好的观点，但我认为他们只是需要一些澄清（如果我只有 15 声望，我会投票给你，兄弟！）

【讨论】：