我遇到了自定義字體的問題。我已經使用create-react-app創建了一個應用程序，并提供了自定義字體文件(。ttf ),以便在構建應用程序時，所有資產都是構建的一部分。我可以在本地看到字體，但在nginx服務器上看不到。Nginx服務器有。ttf支持，因為另一個應用程序工作正常。錯過的應該是什么？我找不到它。此外，firefox不能加載相同的自定義字體。這是我的樣式表-

@font-face {
    font-family: 'Simplied';
    src: url('/fonts/simplied-Light.ttf') format('truetype');
  }

我使用@import 'stylesheet.css '將它導入另一個css文件。

頁（page的縮寫）謝謝你的評論。我做了這樣的改變-

//  ./index.css
@font-face {
  font-family: 'Simplified_Lt';
  font-display: block;
  src: local('Simplified_Lt') url(./fonts/Simplified_Lt.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  margin: 0;
  font-family:'Simplified_Lt';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

而我的fonts文件夾在src/fonts/下。但是我仍然不能使用這種字體。你能給我指出可能遺漏了什么或者項目結構是否正確嗎？我正在使用創建-反應-應用程序。

聽起來你已經有了這樣的安排:

// index.js
import './index.css`

/* index.css */
@import 'stylesheet.css`;

/* other styling */

/* stylesheet.css */
@font-face {
  font-family: 'Simplied';
  src: url('/fonts/simplied-Light.ttf') format('truetype');
}

使用默認哈希構建后 當CRA運行生產版本時，它會對文件名進行哈希處理，并更新對哈希文件的引用。然而，在某些情況下，它的重命名意識是有限的。

構建完成后，您的/build文件夾將包含類似以下名稱的文件:

index.a31171f2.js
index.a31171f2.css
stylesheet.a31171f2.css

CRA檢查javascript文件，并更新所有導入以包含哈希:

// index.a31171f2.js
import './index.a31171f2.css'

但是，它不會在靜態CSS文件中進行相同的修改:

/* index.a31171f2.css */
@import 'stylesheet.css`;

/* other styling */

因為/build目錄有stylesheet.a31171f2.css，而沒有stylesheet.css，所以@import會失敗。

解決方法 將@font-face聲明移動到index.css中，而不是嘗試從另一個文件@import它。

/* index.css */
@font-face {
  font-family: 'Simplied';
  src: url('/fonts/simplied-Light.ttf') format('truetype');
}

/* other styling */

將兩個CSS文件直接導入javascript:

// index.js
import './stylesheet.css'
import './index.css`

有一些方法可以防止構建時散列，但這通常不是一個好主意，因為您會失去自動破壞緩存的好處。

最后，如果你的系統上安裝了Simplied字體，這就解釋了為什么它能在本地工作，而不能在你的遠程服務器上工作。當您在本地開發時,@import仍然會在幕后失敗，但是您的瀏覽器會直接從您的系統加載字體，所以您仍然會看到預期的字體。

我在react也遇到了同樣的問題。我在index.html上做了@font-face in style標簽，這是我的錯。所以它不起作用

解決方法

從index.html風格標簽中移除@font-face，并將其添加到我的App.css文件中，然后它就可以正常工作了...