【问题标题】:webfont has incorrect kerning in IE10, IE11webfont 在 IE10、IE11 中的字距不正确
【发布时间】:2015-03-15 06:44:01
【问题描述】:

我正在为使用自定义创建的网络字体的客户开发一个项目。当我实现以下样式时,Webfont 在 Chrome、Safari、Firefox 和 Opera 中以正确的字距显示:

text-rendering: optimizeLegibility;
font-feature-settings: "kern";

在 IE10/IE11 中,无论是否使用上述样式,字体都不会以正确的字距显示。我尝试了多种选择,但均未成功。根据 MDN,IE10+ 支持 font-feature-settings 属性。事实上,当我检查时,我可以看到 font-feature-settings: kern -- 正在应用,但字距没有变化。任何建议将不胜感激,谢谢。

【问题讨论】:

  • 您有问题的示例/代码共享吗?你已经尝试过什么?帮助我们帮助你:) -- 你有没有看过这个问题:stackoverflow.com/questions/15160897/…
  • 嗨@BJack,我实际上已经检查了该评论,但没有任何示例/建议可以解决我的问题。我也尝试过使用带有和不带有 -ms 前缀的字体功能设置。不幸的是,我与客户签署了 NDA,因此我将无法通过 codepen 或 js fiddle 共享代码/字体。但是,我可以提供每个浏览器中差异的屏幕截图。让我知道这是否有帮助。

标签: css webfonts text-rendering kerning


【解决方案1】:

Microsoft 在此主题上的 demo page 显示的语法与您使用的不同:

/* enable kerning data */ 
.kerning { 
   text-rendering: optimizeLegibility; 
   -moz-font-feature-settings: "kern=1"; 
   -ms-font-feature-settings: "kern" 1; 
}

注意两个特定于 MS 的差异:

  1. font-feature-settings 属性具有 -ms- 前缀。
  2. "kern" 后跟一个空格,分号前是一个值。

【讨论】:

  • @quietqake,我可以在寻求帮助之前尝试该语法。不幸的是,在 IE10 和 IE11 中添加该前缀对我的情况没有任何作用。
  • 在没有您的代码的情况下在黑暗中拍摄,但msdn.microsoft.com/en-gb/library/ie/hh869409%28v=vs.85%29.aspx 建议删除前缀但使用“kern”之后的值。所以你问题中的第二行代码是 font-feature-settings: "kern" 1; (或任何你想要的值)。
  • 感谢您的反馈。我也尝试过这些选项。我访问了 IE 中的演示页面并检查了字距调整值并打开和关闭它们以明显地看到差异。当我在带有自定义字体的页面上使用相同的技术时,不会发生这种行为。在这一点上,我开始认为这是由于纯 css 可能无法解决的字体级别的问题。
  • 您可以在其他浏览器中设置此字体的字距,对吧?目标字体必须支持这些字体自定义方面的每一个,因此如果它在任何浏览器中都不起作用,则表明您使用的字体不支持紧缩。
  • 是的,我能够让它在 Chrome/Safari 和 Firefox 中运行。 IE,特别是 IE10/IE11,即支持字体功能设置的 IE 版本,仍然无法正常工作。
猜你喜欢
  • 2015-02-17
  • 2015-11-17
  • 1970-01-01
  • 2017-06-30
  • 2017-01-27
  • 2012-12-10
  • 1970-01-01
  • 2017-07-29
  • 2016-09-09
相关资源
最近更新 更多