未加载Font-Face

Question

我在我的网站中使用了一些服装字体，但我有一个问题，它没有加载，我不能弄清楚问题，这是代码：

@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');
}

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

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

图片来源：font-face with wrong MIME type in Chrome

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; 
}