0

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

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

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

...它在 Safari 而不是 Chrome 中修复了它，并在这里看到 Mac 应该可以工作： -webkit-font-smoothing 是否仅适用于 Mac 浏览器，而不适用于 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

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

4

2 回答 2

3

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

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 。

于 2014-02-24T20:59:14.273 回答
1

所以我的解决方案是将其转换为嵌入式 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');

于 2013-01-04T22:14:39.893 回答