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

【问题标题】：How to install custom font before loading website?如何在加载网站之前安装自定义字体？
【发布时间】：2012-10-01 11:01:13
【问题描述】：

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

@font-face

{

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);

}

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

【问题讨论】：

标签： asp.net-mvc razor asp.net-mvc-4 font-face

【解决方案1】：

您可能想在http://www.fontsquirrel.com/fontface 上查看 FontSquirrel。他们向您展示了如何做到这一点。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

哦，这很奇怪……现在我也是。不知道那里发生了什么。道歉。

【解决方案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
}

【讨论】：