Google Chrome中的字体呈现问题

Question

我正在使用HTML5 / CSS设计网页。我在导航栏中使用自定义字体“Reboard”，并使用以下代码将其添加到样式表中：

@font-face {
    font-family:'Reboard';
    src: local('fonts/Reboard.ttf');
}

Firefox和Safari上的字体看起来很好。但是，在Chrome上，字体呈现字母之间有一些奇怪的间距。我附上了以下图片来说明差异：

Mozilla和Safari的良好渲染

Google Chrome上的错误呈现

我还注意到一件有趣的事情。当我在Google Chrome上放大一点时，字体会以正常间距神奇地固定。不知道如何解决问题。

感谢您的帮助。

Answer 1

当网页变为实时且当时缺少字体时，会出现此问题。 要解决此问题，必须在配置文件中定义.woff字体MIME类型。

  

注意：所有最新浏览器都接受.woff字体类型。

Answer 2

我认为这是Chrome中的一个已知问题。

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

它似乎重新排列了@ font-face CSS规则，允许svg出现'first'修复此问题。

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

这里有很多人发布了与此相关的问题。

点击此链接了解更多信息：

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