Chrome中的Web字体

Question

我有一个在火狐上看起来很棒的网页字体，而不是在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 (a.k.a.“它应该是什么样子”)

​

• 铬- text-rendering: auto

​

• 铬- text-rendering: optimizeLegibility

​

• 铬- text-rendering: optimizeSpeed

​

• 铬- text-rendering: geometricPrecision

​

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

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

Answer 1

实际上，没有任何事情可以通过CSS来改善这一点。在Firefox和Chrome之间，文本呈现引擎是不同的，您可以看到结果。如果字体没有正确地暗示和准备一个网络字体，你可以期待像这样的结果得到增强。

字体是从哪里获得的？

您可以尝试在FontSquirrel中运行它，看看Ethan提供的任何自动提示是否会使这一点正常化。

关于渲染和DiretWrite的一些附加信息，这就是你所看到的大的微分器.http://blogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html

Answer 2

不确定这是否是你看到的，但Chrome在反混叠和真实字体方面有问题。根据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。

Answer 3

试试这个：

 -webkit-text-stroke: .5px

.5是一种任意的-一些像素值在0和1之间是关键。这迫使字体的亚像素提示。

在这里可以看到一个演示：http://dabblet.com/gist/4154587