时间戳

首页 > 解决方案 > 无法导入 fontawesome-webfont 排版

css - 无法导入 fontawesome-webfont 排版

问题描述

我正在尝试导入字体（fontawesome 版本 4.4.0 的 webfont），我位于项目中名为“fonts”的目录中：

在此处输入图像描述 在此处输入图像描述

我已经阅读了几篇 StackOverflow 帖子，我正在尝试使用@font-face内部 css 导入它：

@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';
}

但是，它没有加载：

在此处输入图像描述

知道为什么会这样吗？我实际上可以在文件中看到预期的字体......

在此处输入图像描述

先感谢您。

编辑：

在浏览器开发者工具的网络选项卡中，我可以看到以下信息：

在此处输入图像描述.

在网络内的“响应”选项卡中，我得到“无法加载响应数据”。也许问题在那里？

编辑2：

其他字体正在加载就好了。例如，“Raleway”（非常相似，但不完全相同。请注意“l”中的差异）：

在此处输入图像描述

我正在尝试获取这种字体（我认为它是 Adob​​e 的“Proxima Nova”，与 Fontawesome 网站中使用的相同，这就是名称的原因）...

在此处输入图像描述

标签： cssfontsfont-awesomewebfontstypography

解决方案

我认为问题在于字体真棒仅适用于图标，而不适用于文本。

如果你去 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";
}

推荐阅读