@ font-face未加载字体 [英] @font-face not loading font

问题描述

我正在尝试使用@ font-face，并且由于某种原因它无法正常工作（IE9，Chrome和Firefox）。我确保在加载字体时指向正确的目录，但是它似乎仍然无法正常工作。

I am trying to use @font-face and for some reason it is failing to work (IE9, Chrome and Firefox). I have made sure that I am pointing to the correct directory when loading the font however it still doesn't seem to work.

这是我的代码：

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

我在做什么错了？

推荐答案

Internet Explorer使用字体的.woff版本（您在代码中未使用）而不是使用.eot版本。我使用了 @ font-facegenerato r工具.fontsquirrel.com / rel = noreferrer> fontsquirrel 获取所有不同的字体变体

Internet Explorer uses the version .woff of the font, which is not used by you in the code, instead of using the version .eot. I used the @font-face generator tool from fontsquirrel to get all the different font variations

输出应如下所示：

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

这篇关于@ font-face未加载字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！