0

我一直在尝试在我的网页上添加我自己的字体，但我仍然不知道如何使用 Font Squirrel 转换器。我下载了一个免费的 .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;
}

fonts是我转换 .ttf 文件的文件夹。我像这样使用它：

body 
{
font-family: 'AbiteRegular';
}

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

4

2 回答 2

1

你的字体可能有问题URL 

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

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

于 2012-06-07T10:15:16.947 回答
1

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

你有这样的文件夹结构吗？包含@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应该包含在任何样式之前。

希望这可以帮助！:)

于 2012-06-07T10:21:45.060 回答