@ font-face用于自定义字体，字体在Chrome中不流畅 [英] @font-face for custom fonts, fonts not smooth in Chrome

问题描述

我有一个web应用程序使用CSS3的@ font-face来嵌入自定义字体。到目前为止，这在IE和Firefox中工作完美。

I have a web application that is using CSS3's @font-face to embed custom fonts. So far this has works perfectly in IE and Firefox.

但是，使用Chrome时，自定义字体显示像素化，不平滑。下面是一个链接到我的字体的一个例子的屏幕片段在Firefox& IE（顶部）和Chrome（底部）：
屏幕截图比较

With Chrome, however, the custom fonts appear pixelated and not smooth. Below is a link to a screen snippet of an example of my font in Firefox & IE (top) and Chrome (bottom): Screenshot comparison

可能很难看到这样一个小样本截图的区别，但当这种情况发生在整个页面，这是非常明显。

It might be hard to see the difference in such a small sample screenshot, but when this is happening all over the page it is very noticeable.

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

Below is an example of how I'm using @font-face in my stylesheet:

@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 VM上拉网站。

Another thing possibly worth mentioning, is that when I pull up the site in ANY browser running on a VM, the fonts are SUPER choppy, much worse than the Chrome example. This is happening when I use any of my school computers, which are all running Win7 VMWare desktops. It also happens when I pull up the site from a Windows 7 VM running on a friend's Mac.

推荐答案

这是Chrome开发者修复的已知问题：

This is a known issue that Chrome devs are fixing:

http://code.google.com/p/chromium/issues/detail?id=137692

若要解决问题，请先尝试：

To work around until then first try:

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

如果这不适合你，这个工作上面没有修复Windows）：

If this does not work for you, this work-around worked for me (above did not fix windows Chrome):

http://code.google.com/p/chromium/issues/detail?id=137692#c68

它会重新排列@

示例：

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

这篇关于@ font-face用于自定义字体，字体在Chrome中不流畅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！