无法导入fontawesome-webfont字体

时间:2020-07-22 10:41:36

标签: css fonts font-awesome webfonts typography

我正在尝试导入字体(字体版本4.4.0的webfont),我位于项目内部的名为“ fonts”的目录中:

enter image description here enter image description here

我已阅读了几篇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';
}

但是,它没有加载:

enter image description here

关于为什么会这样的任何想法?我实际上可以在文件中看到预期的字体...

enter image description here

谢谢。

编辑:

在浏览器开发人员工具的“网络”标签中,我可以看到以下信息:

enter image description here

在网络内部的“响应”选项卡中,出现“无法加载响应数据”的信息。也许问题出在哪里?

Edit2:

正在加载其他字体就可以了。例如,“ Raleway”(非常相似,但不完全相同。请注意“ l”的不同):

enter image description here

我正在尝试获取该字体(我想这是Adobe的'Proxima Nova',与Fontawesome网站上使用的相同,这就是名称的原因)...

enter image description here

1 个答案:

答案 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";
}