Dep*_*sio 7 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>
这显示为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;
}
更改..to assets给出了一个明显的错误,它无法找到字体,所以我很确定相对路径是好的和花花公子.如果我将其更改为font-family: FontAwesome,Arial;,则使用Arial.显然,它找不到FontAwesome,我不知道为什么.
我无法将我的正文字体更改为FontAwesome的任何特殊原因？
您列出了相对路径,有时它们会因拼写错误而导致意外问题.我无法计算有多少次我通过实际拥有一个名为fonts而不是的文件夹搞砸了链接font.
尝试Yovav的答案(/sf/answers/1998924511/)(如下),看看是否能解决问题,尝试使用绝对路径或确保链接正确.
如果你正在努力使用本地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");
}
更好的是使用这个:
<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";
}
不能少,不多:))))
确保服务器识别.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>
需要回答的第一个问题是您使用的网络浏览器是什么。并非所有浏览器都支持自定义字体。有些确实如此，但仅限于额外修改 CSS/HTML。
我建议首先在 Chrome 中进行测试（它似乎具有最好的字体支持）。