OTF Web 字体在 Windows 上的 Webkit/Chrome 中呈现错误答案

【问题标题】：OTF Web Font renders wrong in Webkit/Chrome on WindowsOTF Web 字体在 Windows 上的 Webkit/Chrome 中呈现错误
【发布时间】：2012-12-18 07:15:34
【问题描述】：

有人遇到过这个问题吗？ Windows 7 Chrome 网络字体 OTF 问题：

我有一个网络字体并用 css3 添加它...在 FF/IE（或备份）/Safari 中看起来很棒，但在 Chrome(Windows) 中看起来很糟糕：

我试过这个：-webkit-font-smoothing: antialiased;

...在 Safari 中修复了它，但在 Chrome 中没有修复它，并在这里看到 Mac 应该可以工作： Does -webkit-font-smoothing only work on Mac browsers, Not windows?

我也检查了这个：http://maxvoltar.com/archive/-webkit-font-smoothing

这是我所拥有的：

@font-face { font-family: SeravekBasic; src: url('/fonts/SeravekBasic-Regular.otf'); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased;}

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;}
html, button, input, select, textarea {font-family: SeravekBasic, Arial, Helvetica, sans-serif; color: #000; }

最后我尝试了 Mozilla 的文本渲染，看看这是否对 webkit 有帮助，但没有： https://developer.mozilla.org/en-US/docs/CSS/text-rendering

....不确定是否有其他方法可以解决此问题。

【问题讨论】：

所以看起来转换为嵌入式 (EOT) 似乎在使用这个之后可以解决问题：fontsquirrel.com/fontface/generator .....唯一的缺点它添加了更多我不喜欢的文件（转换每个otf 我明白了）...但可能是我唯一的解决方案..
为什么会出现负数？

标签： css windows google-chrome webkit font-face

【解决方案1】：

我不建议将 OTF 用于 webfonts。它会给使用 Windows XP 的人带来一些渲染问题。您将不得不将防弹字体语法与指定 SVG 用于 chrome 的媒体查询一起使用。

PT Sans 示例

@font-face {
font-family: "PT Sans";
src: url("ptsans.eot");
src: url("ptsans.eot?#iefix") format("embedded-opentype"),
     url("ptsans.woff") format("woff"),
     url("ptsans.ttf")  format("truetype"),
     url("ptsans.svg") format("svg");
font-weight: normal;
font-style: normal
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
    font-family: "PT Sans";
    src: url("ptsans.svg") format("svg")
}
}

Chrome 使用较旧的字体渲染系统，因此无法清楚地显示字体。 Chrome 字体在 SVG 上看起来最好，因此您必须指定一个媒体查询以仅向 Chrome 提供 SVG 文件。您可以在此处找到有关语法的更多信息：http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax。

您应该在 @font-face 语法中包含 ttf、eot、woff 和 svg 格式。浏览器不会下载每一个，它只会下载它需要的那个。它还添加了适当的后备。这应该可以解决您的大部分字体渲染问题。您可以使用 fontsquirrel 生成器为您的@font-face 规则获取适当的文件：http://www.fontsquirrel.com/tools/webfont-generator。

【讨论】：

【解决方案2】：

所以我的解决方案是将其转换为嵌入式 Open Type：

.eot 并添加 .woff 以支持其他浏览器。

这实际上很棒，因为它在 IE9（甚至 IE8）中运行良好

src: url('/fonts/SeravekBasic-Regular.eot'); src: url('/fonts/SeravekBasic-Regular.eot?#iefix') format('embedded-opentype'), url('/fonts/SeravekBasic-Regular.woff') format('woff');

【讨论】：