Google Chrome 中的字体渲染问题答案

【问题标题】：Font rendering problems in Google ChromeGoogle Chrome 中的字体渲染问题
【发布时间】：2014-06-24 05:28:49
【问题描述】：

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

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

字体在 Firefox 和 Safari 上看起来不错。然而，在 Chrome 上，字体在字母之间呈现出一些奇怪的间距。我附上了以下图片来展示差异：

在 Mozilla 和 Safari 上的良好渲染

在 Google Chrome 上呈现错误

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

感谢您的帮助。

【问题讨论】：

你使用过.woff字体类型吗？请在配置文件中定义MIME类型。
让我把它作为答案，这样对其他用户会有好处。
谢谢，这解决了我的问题。我必须使用 WOFF 字体类型并将格式声明为“woff”。

标签： css html google-chrome font-face

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

致谢：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;
}

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

【讨论】：