我有一个 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。
最佳答案
不确定这是否是您所看到的,但 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。
关于css - Chrome 中的网络字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8513637/