如何在 Create-React-App 中使用字體而不彈出？

如何在不彈出的情況下將字體合併到Create-React-App 項目中

為了在不彈出的情況下在create-react-app 專案中使用字體如果需要彈出，有兩個主要選項可用：

方法1：利用導入

此方法涉及將CSS 檔案匯入到JavaScript 程式碼中。預設情況下，src/index.js 引用 src/index.css。使用以./ 開頭的相對路徑將您的字體合併到此CSS 檔案中：

<code class="css">@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}</code>

方法2：使用公用資料夾

如果您不想使用建置管道時，您可以選擇公用資料夾方法。將字體放在public/fonts 目錄中：

public/fonts/MyFont.woff

在public 資料夾中建立CSS 文件，例如public/index.css，並在public/index.html 中手動連結它：

<code class="html"><link rel="stylesheet" href="%PUBLIC_URL%/index.css"></code>

在public/index.css 中：

<code class="css">@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}</code>

推薦

強烈建議使用導入的初始方法，因為它授予訪問權限諸如確保字體透過建置管道、在編譯期間取得雜湊值以實現高效的瀏覽器快取以及在檔案不存在時接收編譯警報等功能。

以上是如何在 Create-React-App 中使用字體而不彈出？的詳細內容。更多資訊請關注PHP中文網其他相關文章！