如何在 create-react-app 中有效管理字體而不彈出？

在create-react-app 管理字體

使用create-react-app 而不彈出時，透過@font 匯入的字體的位置- 臉可能會令人困惑。這裡有兩個選項需要考慮：

使用導入

這是推薦的方法，因為它將字體整合到建置管道中，確保正確的瀏覽器緩存和編譯錯誤，如果檔案遺失。從 JavaScript 文件匯入 CSS 文件，例如 src/index.js 匯入 src/index.css。在CSS 檔案中，使用src/fonts 目錄中字型檔案的相對路徑定義@font-face 規則，例如：

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

使用公用資料夾

雖然不建議使用此方法，但它涉及將字體放置在公共資料夾中，例如public/fonts/MyFont.woff。在這種情況下，請在 public 資料夾中建立一個 CSS 文件，例如 public/index.css，並在 public/index.html 中手動新增指向該文件的連結。在CSS 檔案中，使用常規CSS 表示法以及public/fonts 目錄中字體檔案的相對路徑，例如：

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

但是，此方法存在一些缺點，例如缺少雜湊值和縮小，導致載入速度較慢和潛在的快取問題。

建議

第一種方法「使用導入」是首選方法，因為它可以確保在建造管道中正確處理字體，並且避免潛在的問題。

以上是如何在 create-react-app 中有效管理字體而不彈出？的詳細內容。更多資訊請關注PHP中文網其他相關文章！