我正在尝试导入字体(字体版本4.4.0的webfont),我位于项目内部的名为“ fonts”的目录中:
我已阅读了几篇StackOverflow帖子,并尝试在CSS中使用@font-face
导入它:
@font-face {
font-family: 'MyWebFont';
src: url('../fonts/fontawesome-webfont.eot');
src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2') format('woff2'),
url('../fonts/fontawesome-webfont.woff') format('woff'),
url('../fonts/fontawesome-webfont.ttf') format('truetype'),
url('../fonts/fontawesome-webfont.svg#svgFontName') format('svg');
}
然后在体内使用它:
body {
margin: 0;
padding: 0;
font-family: 'MyWebFont';
}
但是,它没有加载:
关于为什么会这样的任何想法?我实际上可以在文件中看到预期的字体...
谢谢。
编辑:
在浏览器开发人员工具的“网络”标签中,我可以看到以下信息:
在网络内部的“响应”选项卡中,出现“无法加载响应数据”的信息。也许问题出在哪里?
Edit2:
正在加载其他字体就可以了。例如,“ Raleway”(非常相似,但不完全相同。请注意“ l”的不同):
我正在尝试获取该字体(我想这是Adobe的'Proxima Nova',与Fontawesome网站上使用的相同,这就是名称的原因)...
答案 0 :(得分:0)
我认为问题在于,超棒的字体仅用于图标,而不用于文本。
如果您访问fontawesome.com并删除以下代码行:
.fa, .fas {
font-family: "Font Awesome 5 Pro";
}
您将看到所有具有fa和fas类的图标都只是一个矩形。
您还需要给每个元素其他字体,例如:
.fab {
font-family: "Font Awesome 5 Brands";
}
.fa, .far, .fas {
font-family: "Font Awesome 5 Free";
}