CSS @font-face 在生产中不渲染图标（相反它只显示 unicodes）在本地工作正常

Question

我正在尝试在我的 Angular 应用程序中呈现来自 Icomon 库的图标。 我怀疑这是我的 CSS 文件包含方式的问题

我们有 icomon 字体的 index.html 页面

<link rel="stylesheet" href="style.css"></head>

在 style.css 中我有以下声明：

@font-face {
  font-family: 'gtap-icons';
  src:  url('fonts/gtap-icons.eot?5cufps');
  src:  url('fonts/gtap-icons.eot?5cufps#iefix') format('embedded-opentype'),
    url('fonts/gtap-icons.ttf?5cufps') format('truetype'),
    url('fonts/gtap-icons.woff?5cufps') format('woff'),
    url('fonts/gtap-icons.svg?5cufps#gtap-icons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

图标内容加载为（例如）

.icon-ac_unit:before {
  content: "\e900";
}
.icon-access_alarms:before {
  content: "\e901";
}

我的文件夹结构

在字体文件夹中我有 eot、ttf、woff 和 SVG 文件。

在我的本地我可以看到这样的图标：

但在生产中它看起来像：

注意： 我正在使用 utf-8 字符集，控制台中没有与字体相关的错误/警告

我可以看到字体下载正确

我不确定到底出了什么问题。任何帮助深表感谢。谢谢！

Answer 1

我的猜测是字体文件实际上并没有被加载。检查服务器的 MIME 类型设置，确保它知道如何传送每种字体文件类型。

如果你打开你的浏览器开发者工具，你能看到字体文件是否真的被正确下载了吗？

例如：