【问题标题】:Chrome 64bit font face renderChrome 64 位字体渲染
【发布时间】:2015-01-27 10:40:21
【问题描述】:

我在使用新的 64 位 Chrome 时遇到问题。
它不会以常规方式呈现自定义字体,仅以粗体呈现。

图片的顶部是它的显示方式。底部是实际渲染的内容。

这是我得到的:

@font-face {
    font-family: 'icons';
    src: url('../fonts/icons.eot');
    src: url('../fonts/icons.eot?#iefix') format('embedded-opentype'), 
         url('../fonts/icons.woff') format('woff'), 
         url('../fonts/icons.ttf') format('truetype'), 
         url('../fonts/icons.svg#untitled_fontregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.icon {
    font-family: 'icons'; font-style: normal; font-weight: normal;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    position: relative;
    display: inline-block;
}

我已经在 Firefox、Safari 和 Opera 中对其进行了测试,一切都很好。
有什么建议...?

谢谢

【问题讨论】:

  • 你能帮我在 jsfiddle 上重新创建这个吗?
  • 好的,这里...jsfiddle.net/KupGest/75cwuwax
  • 在我的屏幕上看起来不错哈哈。 (在铬)
  • 你的版本是什么?
  • 版本 39.0.2171.71(64 位)

标签: css google-chrome fonts font-face


【解决方案1】:

我已经设法进行了一些有效的“破解”。
我刚刚在字体中添加了“translateZ”,现在可以了,

.icon {
    font-family: 'icons'; font-style: normal; font-weight: normal;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    position: relative;
    display: inline-block;

    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}

但我仍然不知道为什么会这样。

【讨论】:

  • 谢谢 - 这个技巧也对我有用。对我来说,我注意到它在我的 Retina 显示器上运行良好,但在外部连接的显示器上,Chrome 会感到困惑和过度加粗的字体已应用 antialiased
猜你喜欢
  • 2012-06-17
  • 2021-10-18
  • 2013-06-28
  • 2021-02-19
  • 2014-01-27
  • 2013-08-15
  • 1970-01-01
  • 2016-09-15
  • 2015-10-25
相关资源
最近更新 更多