糟糕的字体渲染 Chrome答案

【问题标题】：Bad font rendering Chrome糟糕的字体渲染 Chrome
【发布时间】：2014-01-27 20:59:57
【问题描述】：

我该如何解决这个问题？

第一个“D”在 Chrome 31.0.1650.63 m 上呈现，第二个在 IE11 上呈现。

更新：

添加-webkit-font-smoothing: antialiased; 问题仍然存在...

可能是显卡问题？

更新 2：

css字体代码：

 @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(../font/font1.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(../font/font2.woff) format('woff');
}

【问题讨论】：

你用的是什么字体？
看看这个答案stackoverflow.com/questions/15422770/…
这太疯狂了，他们可以索引网络等等。但至少 2 年后不能正确渲染字体。
Chrome 和 Safari 是最差的！ IE 和 FireFox 运行良好，几乎看不出任何差异。

标签： css google-chrome webfonts font-awesome

【解决方案1】：

我发现给 svg 字体文件更高的优先级可以解决这个问题。

@font-face {
  font-family: 'HelveticaNeueLTStd-Bd';
  src: url('../assets/fonts/helvetica/2B7A70_0_0.svg#wf') format('svg'), // first means higher priority
  url('../assets/fonts/helvetica/2B7A70_0_0.eot');
}

【讨论】：

【解决方案2】：

这是 Chrome 渲染引擎的一个问题，但看起来这个问题最终会得到解决。见https://plus.google.com/u/0/+FrancoisBeaufort/posts/PGPpiQr6bwi

问题出在 Chromium 的 bugtracker 上： https://code.google.com/p/chromium/issues/detail?id=333029 https://code.google.com/p/chromium/issues/detail?id=25541

编辑：
Chrome 37 中添加了可实现漂亮字体渲染的 DirectWrite 支持。 （来源：https://code.google.com/p/chromium/issues/detail?id=25541#c152）

【讨论】：

您指出的问题已关闭 cmets。我更新了我的答案，其中包含两个描述此错误的未解决问题的链接。
我刚刚用这些标志进行了测试，现在在 Chrome 中看起来很棒。希望他们尽快发布。

【解决方案3】：

我遇到了同样的问题，下面的代码是我发现的最好的解决方法。不知何故，如果您隐藏并重新显示正文的内容，字体将正确加载希望这会有所帮助

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    font-family: folio_medium;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

【讨论】：

【解决方案4】：

这是 Chrome 本身的问题。该问题仅存在于 Windows 版 Chrome 上。 Chrome 的 Mac 和 Linux 用户没有这个问题。你真的无能为力。

【讨论】：

【解决方案5】：

您是否尝试过将此 CSS 添加到 Chrome 中？

-webkit-font-smoothing: antialiased

试一试，看看是否有帮助。

【讨论】：