css - @font-face 不适用于 chrome 或 firefox

Question

这在我最近开发的几个网站上都发生过，我完全不明白为什么。 Stack Overflow 上的其他答案似乎都没有帮助我，我在谷歌上找到的任何其他资源似乎也没有适合我的答案。我想我在做一些愚蠢的事情，但是什么？

这是我目前感到沮丧的网站:http://atonea.com/csj/

它不适用于 Chrome 或 Firefox，但适用于 Safari。这对我来说没有任何意义。

Answer 1

您只包括 .ttf用于某些版本的 WebKit 的格式，而是包含多种字体格式以提供跨浏览器支持:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

在任何元素上使用它之前，您还需要添加 @font-face 规则..