自定义 CSS 字体不起作用答案

【问题标题】：Custom CSS font won't work自定义 CSS 字体不起作用
【发布时间】：2013-08-18 06:48:18
【问题描述】：

由于某种原因，我尝试添加的字体不会自行添加到我的网站。我宁愿不使用图像执行此操作，那么字体是否可能损坏？是否可以仅使用 otf 或 ttf 来修复它？

我的代码（以防我遗漏了什么）：

@font-face {
    font-family: urbanJungle;
    src: url('UrbanJungleDEMO.ttf');
}
h1 {
    font-family: urbanJungle;
    font-size: 100px;
    color: #34495e;
}

其他细节：这是在最新的 Chrome 中，其他自定义字体也可以。

在网络控制台中，字体为红色，并显示已取消。

直播网址：http://codestack.co.uk/website/

字体来自大字体，我自己没有做任何额外的处理，和索引页在同一目录下。包括所有相关的 CSS。

【问题讨论】：

使用控制台的“网络”部分查看字体是否真正被加载。
您是否在控制台中遇到任何错误？
问题中缺少很多数据，例如字体的来源、处理方式、使用的所有相关 HTML 和 CSS，最好还有一个演示问题的实时 URL
我标记了这个问题。请提供更多信息。

标签： css fonts

【解决方案1】：

您应该为此使用 Font Squirrel 字体生成器：http://www.fontsquirrel.com/tools/webfont-generator

不同的浏览器需要不同的字体格式，你只提供了一种。生成器会将您的字体转换为所需的所有格式，并为您提供一个 CSS 文件，没有任何麻烦。

【讨论】：

谢谢，有帮助。为什么所有网站都提供ttf，即使在新的谷歌浏览器中也不显示？

【解决方案2】：

您仅使用 TrueType 字体，IE 仅支持 *.eot 字体。你错过了很多信息。如果第一个字体丢失 css 使用列表中的立即下一个字体（称为字体堆栈），使用字体堆栈而不是使用单一字体总是更好。

这是 Paul Irish 撰写的一篇关于 @font-face 的有趣文章：Bulletproof @font-face Syntax

@font-face{
    font-family:MyFont;
    src:url(../font/MyFont.eot);
    src:local('?'),
        url(../font/MyFont.woff) format("woff"),
        url(../font/MyFont.otf) format("opentype"),
        url(../font/MyFont.ttf) format("Truetype"),
        url(../font/MyFont.svg#myfont) format("svg");
    font-weight: normal;
    font-size:normal;
}
body{
 font-family: "MyFont", Verdana, sans-serif; /* Font stack */
}

【讨论】：