字体面未加载

我在我的网站上使用一些服装字体，但我有一个问题，它没有加载，我不明白的问题，这里是代码：

@font-face { font-family: OuachitaWayWbw; src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; font-family: 'ChromeYellowNF'; src: url('fonts/Chrome Yellow NF.ttf'); } #name { font-size:26px; font-family: 'OuachitaWayWbw'; padding-top:30px; color:#000000; margin-bottom:20px; } 

ChromeYellowNF工作。 我也试图把每一个不同的Font-face但没有工作。

Answer 1

你必须为每个字体有一个@ font-face声明：

 @font-face { font-family: OuachitaWayWbw; src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; } @font-face { font-family: ChromeYellowNF; src: url('fonts/Chrome Yellow NF.ttf'); } 

单引号不是必需的。

如果你想为IE9使用自定义字体，你还需要提供一个“.eot”字体文件。 http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

编辑：好吧，不同的浏览器有不同的方式来实现字体：

 @font-face { font-family: OuachitaWayWbw; src: url('fonts/Ouachita Way Wbw.ttf') format("truetype"), url('fonts/Ouachita Way Wbw.woff') format("woff"); src: url('fonts/Ouachita Way Wbw.eot'); } 

您可能还需要将以下types添加到.htaccess / IIS：

 AddType application/vnd.ms-fontobject .eot AddType font/ttf .ttf AddType font/otf .otf AddType application/x-font-woff .woff 

从这里采取： 在Chrome中使用错误的MIMEtypes的字体

Answer 2

不知道这个，但它看起来像你的字体家族的名字应该可能在引号。 你也可以尝试把每个字体放在自己的@ font-face声明中。 这应该可以解决你的问题。 我认为它是在@ font-face声明中指定的最后一个字体族。

 @font-face { font-family: 'OuachitaWayWbw'; src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; } @font-face { font-family: 'ChromeYellowNF'; src: url('fonts/Chrome Yellow NF.ttf'); } #name { font-size:26px; font-family: 'OuachitaWayWbw'; padding-top:30px; color:#000000; margin-bottom:20px; }