如何访问CSS中的字体功能?

时间:2011-03-26 20:44:01

标签: css fonts css3 font-face

我希望在网站上使用某种字体,我需要访问各种备用字体功能(具体来说,这里选择的功能:http://myfonts.us/uOmsiF)。

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

  1. 为webkit浏览器执行此操作的方法(如果可能,支持最近的IE版本);
  2. 如何计算我应该放置的-moz-font-feature-settings属性值(是否有工具?标准?)。
  3. 我更喜欢使用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。显然,这不是许多文本的解决方案,但适用于文本徽标。

3 个答案:

答案 0 :(得分:6)

目前,除Firefox 4之外的任何浏览器都不支持font-feature-settings(即使它使用Mozilla供应商扩展)。但CSS3 Fonts module文件属于该属性,因为它是CSS3的一部分,其他浏览器最终应该支持它。

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

答案 1 :(得分:4)

现在,WebKit https://bugs.webkit.org/showdependencytree.cgi?id=63796&hide_resolved=1实际支持字体功能设置,但尚未在OSX上https://bugs.webkit.org/show_bug.cgi?id=69826#c0

现在也在IE / Trident中(IE10平台预览版)。

是的,因为能够在网上做真正的排版。

答案 2 :(得分:4)

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

  • -webkit-(谷歌浏览器)
  • -moz-(Mozilla Firefox)
  • -ms-(IE 10 +)
  • -o-(Opera)

不幸的是,Safari尚未支持它们。 IE 9及更低版本也不支持它们。截至2012年11月26日,根据StatsCounter,这将使不支持它的浏览器大约34%。这是一个很大的差距,但它一直在下降。

就个人而言,我现在会使用图像而不是字体。 34%的东西是相当大的。如果我在购物并发现一块馅饼,34%吃了它的人不喜欢它,我不会买它。

但是,如果您真的想使用font-feature-settings,那么我建议您使用article by Font Deckthis one实际上正在使用的功能。

虽然看起来你已经回答了你的问题,但我只是想我会扩展这个话题。 sideshowbarker有一些很好的观点,但我认为他们只需要一些澄清(如果我只有15个声望我会投票给你,兄弟!)