@font-face 用于自定义字体，Chrome 中的字体不平滑

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

然而，在 Chrome 中，自定义字体显得像素化且不平滑。下面是 Firefox & IE（上）和 Chrome（下）中我的字体示例的屏幕片段链接：截图对比 http://dhines.com/font-issue.jpg

在如此小的示例屏幕截图中可能很难看出差异，但是当这种情况在整个页面上发生时，它是非常明显的。

下面是我如何在样式表中使用 @font-face 的示例：

@font-face 
{
    font-family: 'MyFont';
    src: url('../Content/fonts/MyFont.eot?') format('embedded-opentype'),
         url('../Content/fonts/MyFont.ttf') format('truetype');
}

另一件可能值得一提的事情是，当我在虚拟机上运行的任何浏览器中打开该网站时，字体超级不稳定，比 Chrome 示例要糟糕得多。当我使用学校的任何计算机时都会发生这种情况，这些计算机都运行 Win7 VMWare 桌面。当我从朋友 Mac 上运行的 Windows 7 虚拟机上拉取该网站时，也会发生这种情况。

这是 Chrome 开发人员正在修复的一个已知问题：

http://code.google.com/p/chromium/issues/detail?id=137692 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 http://code.google.com/p/chromium/issues/detail?id=137692#c68

看来重新排列 @font-face CSS 规则以允许 svg 出现“第一个”可以解决此问题。

example:

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