我在我的网站上使用了一些服装字体,但我遇到了一个没有加载的问题,我无法弄清楚问题,这里是代码:
@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
但是没有奏效。
答案 0 :(得分:7)
每种字体都必须有@ 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
答案 1 :(得分:2)
不确定这一点,但看起来你的font-family名称应该在引号中。您也可以尝试将每种字体放在自己的@ font-face声明中。那应该可以解决你的问题。我认为这是在@ font-face声明中指定的最后一个font-family。
@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;
}