8

这无疑是我在做一些非常愚蠢的事情，但我看不到。我正在尝试在我的 css 中使用 FontAwesome 作为字体系列，但它似乎不起作用。

用最少的代码，我有：

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

这清楚地显示为Times New Roman。

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 有什么特别的原因？

4

7 回答 7

8

您正在列出相对路径，有时它们会由于拼写错误而导致意外问题。我数不清有多少次因为实际上有一个名为fonts而不是font.

尝试 Yovav 的回答（https://stackoverflow.com/a/28556064/3616018）（如下），看看是否可以解决问题，如果没有，请尝试使用绝对路径或确保链接正确。

如果您正在为本地字体苦苦挣扎，您可以通过 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");
}
于 2015-01-26T16:55:51.747 回答
8

更好的是使用这个：

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

}

不多，不多：））））

于 2014-01-20T18:40:43.597 回答
7

确保 .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>
于 2015-02-17T06:36:35.137 回答
2

直到我在样式名称中添加了“之前”这个词之前，我无法让它工作。那为我修好了！

.myClass:before {
    font-family: FontAwesome;
    content: "\f024";
}
于 2016-02-18T04:23:09.013 回答
0

FontAwesome 字符是仅存储在 Unicode 私人使用区域中的图标，因此如果您的文本不使用这些字符，您将看不到该字体。

试试&#xF00C;。

于 2015-01-26T17:07:41.020 回答
0

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

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

于 2013-03-15T11:47:59.883 回答
0

你写错了：font-family: FontAwesome;

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

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

于 2013-03-15T13:52:07.983 回答