如何在不彈出的情況下向 Create-React-App 專案添加字體？

為基於 create-react-app 的項目添加字體而不彈出

使用構建管道是向 create-react-app 項目添加字體的推薦方法。這可以確保正確的處理、瀏覽器快取的雜湊值以及編譯錯誤檢測。

1. 使用導入：

   • 從以下位置匯入CSS 檔案JS，例如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/MyFont.woff。
   • 建立public 資料夾中的 CSS 文件，例如 public/index.css。

   • 在 public/index.html 中加入此 CSS 檔案的連結：

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

     登入後複製
   • 使用相對路徑 fonts/MyFont.woff 在 CSS 檔案中引用字體。

請注意，不建議使用公用資料夾方法，因為它不能確保正確處理、雜湊或錯誤偵測。它也更容易出現快取問題。

無論採用哪種方法，您都需要使用支援的格式的字體，例如 WOFF、WOFF2 或 TTF。

以上是如何在不彈出的情況下向 Create-React-App 專案添加字體？的詳細內容。更多資訊請關注PHP中文網其他相關文章！