Question

有人遇到过这个问题吗？ 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; }

最后我尝试了Mozillas文本呈现，看看这是否有助于webkit，但没有： https://developer.mozilla.org/en-US/docs/CSS/text-rendering

....不确定是否有其他东西可以解决这个问题。

Answer 1

我不建议将OTF用于webfonts。它会导致使用Windows XP的人员出现一些渲染问题。您将不得不使用防弹font-face语法和媒体查询指定SVG for 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使用较旧的字体渲染系统，因此它不会显示字体。使用SVG时，Chrome字体效果最佳，因此您必须指定媒体查询才能仅向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。

Answer 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');

OTF Web Font在Windows上的Webkit / Chrome中呈现错误

2 个答案: