我試圖在我的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";
}

我的文件夾結構

在fonts文件夾里，我有eot，ttf，woff和SVG文件。

在我的本地頁面中，我可以看到如下圖標:

但是在生產中，它看起來像:

注意: 我使用utf-8字符集，控制臺中沒有與字體相關的錯誤/警告

我可以看到字體下載正確

我不確定到底出了什么問題。非常感謝任何幫助。謝謝大家！

我猜字體文件實際上并沒有被加載。檢查服務器的MIME類型設置，以確定它知道如何傳送每種字體文件類型。

如果你打開你的瀏覽器，你能看到字體文件下載是否正確嗎？

例如: