@ font-face没有加载字体

Question

我正在尝试使用@ font-face,由于某种原因它无法正常工作(IE9,Chrome和Firefox).我已经确保在加载字体时指向正确的目录,但它似乎仍然无法正常工作.

这是我的代码:

@font-face{
font-family: 'test';
src: url('../fonts/FontName.ttf'),
         url('../fonts/FontName.eot');
font-weight: normal;
font-style: normal;
}

并称之为:

#header{
text-align:left;
padding: 10px;
font-family:test;
}

我究竟做错了什么？

Answer 1

Internet Explorer使用字体的.woff版本,代码中未使用该字体,而不是使用版本.eot.我使用fontsquirrel的@ font-face generato r工具来获取所有不同的字体变体

输出应该如下所示:

@font-face{
font-family: 'test';
src: url('../fonts/FontName.eot'),
     url('../fonts/FontName.eot?#iefix') format('embedded-opentype'),
     url('../fonts/FontName.woff') format('woff'),
     url('../fonts/FontName.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Answer 2

除了人们所说的不同类型的字体（以及将format()元素与 一起使用url()）之外，还值得检查您的 css 继承性，以确保没有任何内容#header或其中的元素设置为font-weight: bold。由于您仅指定正常粗细/正常样式字体，因此如果某些内容使其变为粗体，则该字体将不会显示。