Question

由于某种原因，我试图添加的字体不会添加到我的网站。我宁愿不用图像做这个，所以字体是否可能被破坏？是否可以用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/

字体来自Dafont，没有我自己应用的额外处理，它与索引页面位于同一目录中。所有相关的CSS都包括在内。

Answer 1

您应该使用Font Squirrel font-face生成器：http://www.fontsquirrel.com/tools/webfont-generator

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

Answer 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 */
}

自定义CSS字体不起作用

2 个答案: