首頁 >web前端 >css教學 >如何將自訂字體新增至 Create-React-App 專案?

如何將自訂字體新增至 Create-React-App 專案?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-06 02:50:02935瀏覽

How do I add custom fonts to a Create-React-App project?

在 Create-React-App 專案中加入字體

透過使用匯入

此建議方法將字體合併到建置管道中。要實現此目的:

  • 從 JS 匯入 CSS 檔案(例如,匯入 './index.css')。
  • 使用以. / (例如,@font-face { src: local('MyFont'), url(./fonts/MyFont.woff) }).

透過使用公用資料夾

作為替代方案,您可以手動管理公用資料夾中的字型:

  • 將字體放置在公用資料夾內的某個位置(例如public/ fonts/MyFont.woff)。
  • 新增;從 public/index.html 到 CSS 檔案(例如,)。
  • 使用常規 CSS 表示法來引用字體在 CSS 檔案中,考慮相對路徑(例如 @font-face { src: local('MyFont'), url(fonts/MyFont.woff) })。

推薦

選擇「使用導入」方法可以獲得以下好處:

  • 建置管道整合
  • 瀏覽器快取的哈洛希
  • 遺失檔案的編譯錯誤

以上是如何將自訂字體新增至 Create-React-App 專案?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn