@font-face用于自定义字体，Chrome中的字体不平滑
我有一个web应用程序，它使用CSS3的@font-face嵌入自定义字体。到目前为止，它在IE和Firefox中都运行得很好。
然而，使用Chrome时，自定义字体显示为像素化且不平滑。下面是我在Firefox & IE (顶部)和Chrome (底部)中的字体示例的屏幕片段的链接：Screenshot comparison
可能很难在这么小的示例屏幕截图中看出区别，但当这种情况在整个页面上发生时，它是非常明显的。
下面是我如何在样式表中使用@font-face的示例：
@font-face
{
font-family: 'MyFont';
src: url('../Content/fonts/MyFont.eot?') format('embedded-opentype'),
url('../Content/fonts/MyFont.ttf') format('truetype');
}另一件可能值得一提的事情是，当我在VM上运行的任何浏览器中打开网站时，字体都是超级不稳定的，比Chrome示例要糟糕得多。当我使用学校的任何一台计算机时，都会发生这种情况，这些计算机都运行Win7 VMWare台式机。当我从朋友的Mac上运行的Windows7虚拟机打开网站时，也会发生这种情况。
回答 6
Stack Overflow用户
发布于 2012-12-16 10:25:49
这是Chrome开发人员正在修复的一个已知问题：
http://code.google.com/p/chromium/issues/detail?id=137692
要在此之前先尝试，请执行以下操作：
html {
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
}如果这对你不起作用，这个变通办法对我有效(上面没有修复windows Chrome)：
http://code.google.com/p/chromium/issues/detail?id=137692#c68
重新排列@font-face CSS规则以允许svg 'first‘出现似乎解决了这个问题。
示例：
-before--------------
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
-after--------------
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.svg') format('svg'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}Stack Overflow用户
发布于 2012-05-17 05:55:26
不幸的是，所有浏览器呈现字体的方式都不同。一个在一个上看起来还可以，在另一个上可能就有麻烦了。为font -face找到一个好的字体并不容易……如果你想要完美的像素，你必须使用图像。
但并不是所有的字体都丢失了，这里有20种免费的字体(甚至商业使用都是免费的！)它呈现得非常好(我总是检查这个列表)：http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/
记住，你不能托管付费字体，否则你会分发它们，你可能会陷入麻烦。
Stack Overflow用户
发布于 2012-05-17 05:58:02
你可能想玩一下optimizeLegibility：http://aestheticallyloyal.com/public/optimize-legibility/
还有-webkit-字体-平滑：http://maxvoltar.com/archive/-webkit-font-smoothing
使用字体松鼠字体生成器来生成webfonts和css来加载fonts：http://www.fontsquirrel.com/fontface/generator也是值得的(尽管我不确定这是否能解决你的问题)
https://stackoverflow.com/questions/10627209
复制相似问题