css - 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 类型。

Note: .woff font type is accepted by all latest browser.