Question

我一直在尝试在我的网页上添加自己的字体，但我仍然不知道如何使用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文件中。但是正文忽略了这一点。你知道为什么会这样吗？

Answer 1

您的字体URL

可能有问题

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

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

Answer 2

您是否已在其他浏览器中查看过？检查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应该在任何样式之前包含在内。

希望这有帮助！：）

不能使用@ font-face和Font Squirrel转换

2 个答案: