css - Chrome 中的网络字体

Question

我有一个 webfont 在 Firefox 上看起来很棒，但在 Chrome 上却不是那么好。我试过使用 text-rendering 属性，结果并不理想。我的 CSS 是这样的:

@font-face {
    font-family: 'TextFont';
    src: url('[my font file url]') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: TextFont, Tahoma, Geneva, sans-serif;
    text-rendering: auto;
}

更改 text-rendering 在 Firefox 中似乎没有任何作用，所以我发布了一个截图。

结果:

• Firefox(又名“它应该是什么样子”)

  

• Chrome - 文本渲染:自动

  

• Chrome - 文本渲染:optimizeLegibility

  

• Chrome - 文本渲染:optimizeSpeed

  

• Chrome - 文本渲染:geometricPrecision

  

与 Firefox 相比，所有 Chrome 屏幕截图看起来都非常糟糕。 我在 CSS 中遗漏了什么吗？

我使用的是 Windows 7、Firefox 8.0 和 Chrome 15.0。

Answer 1

不确定这是否是您所看到的，但 Chrome 在消除锯齿和 truetype 字体方面存在问题。根据 http://www.fontspring.com/blog/smoother-web-font-rendering-chrome ，您可以改为在字体中的 TrueType 之前指定 SVG 字体，例如:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); 
src: url('webfont.eot?#iefix') format('embedded-opentype'),
    url('webfont.svg#svgFontName') format('svg'),
    url('webfont.woff') format('woff'),
    url('webfont.ttf')  format('truetype');
}

最大的缺点是 Safari 会同时下载 svg 和 woff。