不能将@font面与字体松鼠转换一起使用

Question

我一直在尝试在我的网页上添加自己的字体，但我仍然不知道如何使用字体松鼠对话器。我下载了一个免费的.ttf字体，并使用生成器对其进行了转换，如下所示：

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

其中字体是我保存.ttf文件转换的文件夹。我是这样使用它的：

body 
{
font-family: 'AbiteRegular';
}

所有这些配置都在.css文件中。但正文忽略了这一点。你知道为什么会这样吗？

Answer 1

您的字体URL可能有问题

url('fonts/abite-webfont.eot');...

或者您使用的浏览器不支持动态字体。

Answer 2

您是否检查过其他浏览器？检查IE，火狐，铬。如果甚至没有一个浏览器显示字体，那么您的文件夹结构可能是错误的。

您的文件夹结构是这样的吗？包含@font-face声明（例如font.css）的css文件应该以这样的方式放置，即旁边有一个名为fonts的文件夹，字体文件应该在该文件夹中。

/font.css
/fonts/abite-webfont.eot
/fonts/abite-webfont.woff
/fonts/abite-webfont.ttf
/fonts/abite-webfont.svg

这应该适用于所有浏览器，包括 IE 6、IE 7 和 IE 8。只要确保路径正确即可。而且，body声明应该在font.css声明之后，即font.css应该在任何样式之前包含。

希望这有帮助！ :)