Css googlechrome中的字体渲染问题

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

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

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

在Mozilla和Safari上呈现良好

Google Chrome上的渲染错误

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

---

谢谢你的帮助。

我相信这是Chrome中的一个已知问题

学分：

似乎重新排列@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;
}

这里的很多人都发布了与此相关的主题

有关详细信息，请查看此链接：

---

当网页上线且字体丢失时，会出现此问题。 要解决此问题，必须在配置文件中定义

.woff

字体MIME类型

注意：

.woff

字体类型为所有最新浏览器所接受

---

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