CSS FontAwesome 不能作为字体系列使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14698589/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
FontAwesome not available as a font-family?
提问by Depressio
This is undoubtedly me doing something really dumb, but I can't see it. I'm trying to use FontAwesome as a font-family in my css, but it doesn't seem to be working.
这无疑是我在做一些非常愚蠢的事情，但我看不到。我试图在我的 css 中使用 FontAwesome 作为字体系列，但它似乎不起作用。
With minimal code, I have:
用最少的代码，我有：
<head>
<link href="assets/css/font-awesome.css" rel="stylesheet">
<style>
body {
font-family: FontAwesome;
}
</style>
</head>
<body>
Test FontAwesome!
</body>
This is showing up as clearly Times New Roman.
这清楚地显示为 Times New Roman。
The FontAwesome font itself is stored in assets/font/, and font-awesome.css has the following @font-facedefined:
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;
}
Changing the ..to assetsgives an obvious error that it can't find the font, so I'm pretty sure the relative pathing is just fine and dandy. If I change it to font-family: FontAwesome,Arial;, it uses Arial. Clearly, it can't find FontAwesome and I don't know why.
改变..toassets给出了一个明显的错误，它找不到字体，所以我很确定相对路径很好而且很花哨。如果我将其更改为font-family: FontAwesome,Arial;，它将使用 Arial。显然，它找不到 FontAwesome，我不知道为什么。
Any particular reason why I'm not able to change my body font to FontAwesome?
我无法将正文字体更改为 FontAwesome 的任何特殊原因？
回答by BlueEyesWhiteDragon
You are listing relative path, sometimes they cause unexpected issues due to spelling errors. I can't count how many times I have messed up the link by actually having a folder called fontsinstead of font.
您列出的是相对路径，有时它们会因拼写错误而导致意外问题。我无法计算实际上有一个名为fonts而不是font.
Try Yovav's answer (https://stackoverflow.com/a/28556064/3616018) (below) to see if that clears the issue up if not, try using absolute paths instead or make sure the links are correct.
尝试 Yovav 的回答 ( https://stackoverflow.com/a/28556064/3616018)（如下）以查看是否可以解决问题，如果没有，请尝试使用绝对路径或确保链接正确。
If you are struggling with local font-face, you can try a "remote" font-face via cdn (has benefit of maybe being cached already by the browser from other sites)
如果您在使用本地字体时遇到困难，可以尝试通过 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");
}
回答by Yovav
Make sure both .woff and .woff2 are recognized by the server...
确保 .woff 和 .woff2 都被服务器识别...
Add this in web.config at the element:
在 web.config 的元素处添加此内容：
<staticContent>
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
回答by Friede Petr
Much better is use this:
更好的是使用这个：
<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>
In your stylesheet use only for example:
在您的样式表中仅使用例如：
#post-title a:before {
font-family: FontAwesome;
content: "\f0c4";
}
No less, no more :))))
不多也不少 :))))
回答by Harvey Mushman
I was unable to get this working until I added the word "before" to the style name. That fixed it for me!
直到我在样式名称中添加了“before”这个词后，我才能让它工作。那为我修好了！
.myClass:before {
font-family: FontAwesome;
content: "\f024";
}
回答by MatTheCat
FontAwesome characters are icons stored in Unicode's private use area only, so if your text doesn't use these characters you can't see the font.
FontAwesome 字符是仅存储在 Unicode 专用区域中的图标，因此如果您的文本不使用这些字符，您将看不到字体。
Try .
试试。
回答by Jacob
The first question that needs to be answered is what web browser are you using. Not all browsers support custom fonts. Some do, but only with extra hacked up CSS/HTML.
需要回答的第一个问题是您使用的是什么网络浏览器。并非所有浏览器都支持自定义字体。有些可以，但只有额外修改的 CSS/HTML。
I recommend testing it out first in Chrome (it seems to have the best font support).
我建议先在 Chrome 中测试一下（它似乎有最好的字体支持）。
回答by Sandeep Pattanaik
you are write Wrong: font-family: FontAwesome;
你写错了： font-family: FontAwesome;
Please write like this. font-family:'FontAwesome';
请这样写。 font-family:'FontAwesome';
I think this will help u, because I had the same problem before one month.
我认为这会对你有所帮助，因为我在一个月前遇到了同样的问题。
