0

由于某种原因，我尝试添加的字体不会自行添加到我的网站。我宁愿不使用图像执行此操作，那么字体是否可能损坏？是否可以仅使用 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。

4

2 回答 2

2

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

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

于 2013-08-08T23:00:10.290 回答
0

You are using only TrueType font, IE support only *.eot fonts. And you are missing a lot informations. It is always better to use font stack instead of using single font, if first font went missing css use immediate next font on the list (called font-stack).

Here is an interesting article about @font-face by Paul Irish : 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 */
}
于 2013-08-17T22:48:18.070 回答