Question

我有一些像Trade Gothic Oblique.ttf这样的自定义字体，现在我在我们的网站上使用它，但在加载网站安装此字体之前没有安装我使用了以下代码：

@字体面

{

font-family：“TadeGothic”，TradeGothic，TradeGothic LT Std;

src: url(../fonts/Trade Gothic LT Std Condensed No. 18.ttf);
src: url(../fonts/Trade Gothic Oblique.ttf);

}

但它不起作用。你能告诉我它有什么问题吗？

Answer 1

您可能希望在http://www.fontsquirrel.com/fontface查看FontSquirrel。他们会告诉你如何做到这一点。

但请注意，它与IE的工作方式不同于其他浏览器。我相信IE需要TTF，其他浏览器需要OTF作为嵌入式字体标准。

Answer 2

仅使用.ttf文件类型无法跨浏览器工作。如果您查看此blog post by Paul Irish，您可能会更好地了解在您的网站中嵌入字体。

还有很多其他网站都有说明，简单的搜索会给你很多信息。

Answer 3

.eot仅适用于IE。对于其他人，您应该使用.otf或.ttf个文件。以下应该有效：

@font-face {
    font-family: 'Font 1';
    src: url('Font1.eot?') format('eot'), url('Font1.ttf') format('truetype');

}

另一种方式如下：

@font-face{
    font-family:'Font 1';
    src: url('Font1.eot'); // For IE
}

@font-face{
    font-family:'Font 1';
    src: url('Font1.otf'); // For others
}

如何在加载网站前安装自定义字体？

3 个答案: