@ font-face用于自定义字体,Chrome中的字体不流畅

Question

我有一个使用CSS3的@ font-face嵌入自定义字体的Web应用程序.到目前为止,这在IE和Firefox中完美运行.

但是,使用Chrome时,自定义字体会出现像素化并且不平滑.下面是Firefox和IE(顶部)和Chrome(底部)中我的字体示例的屏幕摘要链接: 屏幕截图对比

在这么小的样本截图中可能很难看出差异,但是当整个页面上发生这种情况时,这是非常明显的.

下面是我在样式表中使用@ 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上运行的Windows 7 VM上拉网站时也会发生这种情况.

Answer 1

这是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;
}