自定義本地 fonts 不適用於 webpack 5

Question

我有一些本地 fonts 我想在我的項目中使用。 我已經閱讀了一些教程和關於此的問題，並且正在按照我所看到的建議進行操作，但是我的 fonts 沒有在瀏覽器中正確顯示。 我正在使用 webpack 5. 在我的 webpack 配置中：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(woff|woff2|ttf)$/,
        use: {
          loader: "url-loader",
        },
      },
    ]
  }
}

我的src/assets/fonts/目錄中有一堆 .tff 字體文件。 我有一個全局 styles 的 .scss 文件。在那里，我定義了字體名稱和我想要使用的字體名稱，webpack 應該在哪里找到它們：

@font-face {
  font-family: "InterRegular";
  src: url("../assets/fonts/Inter-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "InterMedium";
  src: url("../assets/fonts/Inter-Medium.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "InterSemiBold";
  src: url("../assets/fonts/Inter-SemiBold.ttf") format("truetype");
  font-display: swap;
}
// etc

我相當確定 webpack 找到了這些，因為如果我得到文件的路徑錯誤，webpack 錯誤。 然后我嘗試應用字體：

html,
body {
  font-family: "InterSemiBold", sans-serif;
}

沒有錯誤，但字體未應用於頁面。 當我查看 my.network 選項卡時，我可以看到確實正在加載一個字體文件：

但這顯然不是InterSemiBold 字體。 不管我使用什么字體，這個名字奇怪的.tff 文件總是顯示相同的襯線字體。

查看元素的計算值，我可以看到瀏覽器正在讀取字體系列的"InterSemiBold", sans-serif ，但仍默認為Arial ：

我也嘗試使用 webpack 的file-loader在 fonts 中加載，但這沒有區別，許多人建議改用url-loader 。

我在這里做錯了什么？ 為什么我的字體沒有被加載和應用？

Answer 1

您的開發工具屏幕截圖表明您的實際頁面/應用程序樣式表期望字體系列名稱為“Inter”。
所以你不需要為每個字體粗細使用不同的姓氏
並將您的@font-face規則更改為以下內容：

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/Inter-Regular.ttf') format('truetype')
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../assets/fonts/Inter-Medium.ttf') format('truetype')
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype')
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/Inter-Bold.ttf') format('truetype')
}

你的@font-face規則應該包含一個font-style值。
對於斜體樣式，您可以將其更改為font-style: normal 。

font-url 必須使用字體樣式的確切文件名（請注意，因為一些自動字體加載器會在內部重命名文件名或直接從 Google 加載更新的文件 - 導致文件名類似於“inter-v11-latin-800. ttf”）。

由於瀏覽器無法自動判斷哪個中間粗體是“半粗體”或“輕”，因此您可以添加特定font-weight值，這些值可用於將所有字體粗細映射到不同的選擇器，如下所示：

body{
    font-family:Inter;
    font-size:16px;
}

.medium{
    font-weight:500;
}

.semibold{
    font-weight:600;
}


strong, h1, h2,
.button{
    font-weight:700;
}

你也可以仔細檢查你的主 css——它也可能包含一個單獨的 @font-face 聲明。

如果一切正常，您應該在開發工具中看到 .tff 文件，就像在 @font-face urls 中定義的一樣（例如“Inter-Regular.ttf”）

還是行不通？

嘗試通過瀏覽器中的絕對 URL打開字體。

字體文件連接測試示例
假設您編譯的文件夾結構如下所示：

• 最終 URL 是“myapp.com”
• 主 CSS 位於 URL“myapp.com/css/main.css”下
• 字體文件位於目錄 URL“myapp.com/assets/fonts/”中（至少根據您的 css/編譯代碼）
• 實際的字體文件應該在 URL“myapp.com/assets/fonts/Inter-Regular.ttf”下可用（可下載）

如果這不起作用 - 您需要修復@font-face規則中的 URL。

如果在編譯過程中將資產復制/組裝到新目錄中，這一點尤其重要——因此以前的路徑/URL 可能不會“自動”修復。

另一個原因可能是內聯 css - 因此 css 成為編譯的 HTML <head>或<body>的一部分 - 相對路徑/URL 可能不再起作用 => 絕對路徑可以解決這個問題（......盡管，任何體面的自動內聯腳本應該足夠聰明，可以相對於絕對 URL 進行翻譯）。

編譯好的css

最終的 css 還可能包含一些覆蓋規則。
因此，在 devtools 中檢查最終編譯的 css 並搜索任何@font-face規則 - 作為最后的手段：將!important關鍵字添加到字體src以強制執行所需的 URL。

字體文件可能已損壞？

由於“inter”可作為免費的 google webfont 使用，您可以通過google webfonts helper獲得“新鮮”副本

Answer 2

你有沒有解決過這個問題？ 我在使用 Webpack 5 和我在本地使用的 Google 字體時遇到了同樣的問題。 Dev Tools 顯示該元素是使用所需字體計算的，但顯然不是該字體，當我添加備用選項“monospace”時，它會恢復為備用字體。 以上建議對我都沒有用，很想知道你是否讓這個工作。