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在任何元素上使用它之前添加规则..

Answer 2

您需要在声明之前添加您的字体。所以把你的字体放在css的开头。