Question

这种情况一直发生在我最近一直在开发的几个网站上，我完全不知道为什么。 Stack Overflow上的其他答案似乎都没有帮助我，也没有我在google上找到的任何其他资源似乎对我有答案。我在想我做的很蠢，但是什么？

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

它无法在Chrome或Firefox上运行，但它可以在Safari上运行。这对我没有任何意义。

Answer 1

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

@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规则用于任何元素之前，您还需要添加{{1}}规则。

Answer 2

您需要在声明前添加font-face。所以将你的字体面放在你的css的开头。

@ font-face无法使用chrome或firefox

2 个答案: