FontAwesome不能作为字体系列?

时间:2013-02-05 01:12:27

标签: css font-face font-awesome

这无疑是我做一些非常愚蠢的事情,但我看不到它。我试图在我的CSS中使用FontAwesome作为字体系列,但它似乎没有用。

使用最少的代码,我有:

<head>
    <link href="assets/css/font-awesome.css" rel="stylesheet">
    <style>
        body {
            font-family: FontAwesome;
        }
    </style>
</head>
<body>
    Test FontAwesome!
</body>

这显示出时代新罗马。

FontAwesome字体本身存储在assets / font /中,而font-awesome.css定义了以下@font-face

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.0.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

..更改为assets会发出一个明显的错误,即无法找到字体,所以我很确定相对路径是好的和花花公子。如果我将其更改为font-family: FontAwesome,Arial;,则使用Arial。显然,它找不到FontAwesome,我不知道为什么。

为什么我无法将我的正文字体更改为FontAwesome?

7 个答案:

答案 0 :(得分:7)

您正在列出相对路径,有时它们会因拼写错误而导致意外问题。通过实际拥有一个名为fonts而不是font的文件夹,我无法计算多少次弄乱了链接。

尝试Yovav的答案(https://stackoverflow.com/a/28556064/3616018)(如下),看看是否能解决问题,请尝试使用绝对路径,或确保链接正确。

如果你正在努力使用本地font-face,你可以通过cdn尝试一个“远程”字体(有可能被浏览器从其他网站缓存)

// Swap http for https if required.

@font-face {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style : normal;
           src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
           src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}

答案 1 :(得分:6)

更好的是使用它:

<head>

<!-- fonts awesome -->

<link href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'>

</head>

在样式表中仅使用例如:

#post-title a:before {

    font-family: FontAwesome;
    content: "\f0c4";

}

不能少,不再:))))

答案 2 :(得分:6)

确保服务器识别.woff和.woff2 ...

在web.config中添加元素:

<staticContent>
  <remove fileExtension=".woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>

答案 3 :(得分:1)

在我将“之前”一词添加到样式名称之前,我无法正常工作。那为我修好了!

.myClass:before {
    font-family: FontAwesome;
    content: "\f024";
}

答案 4 :(得分:0)

需要回答的第一个问题是您使用的是什么Web浏览器。并非所有浏览器都支持自定义字有些人这样做,但只有额外的黑客攻击CSS / HTML。

我建议先在Chrome中测试它(它似乎有最好的字体支持)。

答案 5 :(得分:0)

你写错了:font-family: FontAwesome;

请写这样的。 font-family:'FontAwesome';

我认为这会对你有所帮助,因为我在一个月之前遇到了同样的问题。

答案 6 :(得分:0)

字体真棒字符只是存储在Unicode专用区域中的图标,因此如果您的文字不使用这些字符,则无法看到字体。

尝试&#xF00C;