正確的方式來包含新的字體並引用它？

Question

在ReactQL文件結構中，是否有推薦的地方來存儲自定義字體，以及如何引用該字體？

例如，我嘗試將字體添加到./static，並在styles.global.css中引用它，但沒有這樣的運氣。

有什麼建議嗎？

Answer 1

您可以通過三種方式引用字體（或圖片）：

1.從你的JS代碼內

您可以導入字體/ IMG就像任何其他代碼，使用ES6模塊語法：

// imports will start looking in your project root 
image someFont from 'src/fonts/whatever.ttf'; // someFont = public path to font 

在這種情況下，​​將等於由真實的WebPack處理，並且在所得到的dist夾傾倒字體文件路徑的字符串。這是自動完成的;您不需要將字體或圖像放在任何特殊位置。

然後，您可以在您通常需要完整文件路徑的任何地方將其引用到您的React組件中;該字符串將從ReactQL Web服務器公開訪問：

// The regular, pre-processed PNG image 
import logoImage from 'src/images/logo.png'; 

// A component that uses the image 
const ShowLogo =() => (
    <img src={logoImage} /> 
); 

在這種情況下，logoImage可能拉閘爲/assets/img/logo.d41d8cd98f00b204e980.png的WebPack已經處理，並在產生的Javascript包甩不變後。

按照慣例，我建議您將靜態資產保留在與調用React組件相同的文件夾中。如果您有多個組件指向相同的資產，只需選擇一個合理的名稱 - 如​​或src/images，或者甚至只是/images。

2.從你的CSS中

內的任何.css|sass|scss|less|或*.global.版本相同的，你可以導入使用常規@import語法：

styles.global.css

@font-face { 
    font-family: 'Starjout'; 
    src: url('./Starjout.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

html { 
    padding: 0; 
    border: 0; 
    font-family: 'Starjout'; 
    font-size: 16px; 
} 

爲確保正確解析字體，請相對於CSS文件導入。在這種情況下，Starjout.ttf與styles.global.css位於同一文件夾中。

3內部/static

您放在/static將被放置在所產生的dist/public文件夾原樣。它不會被Webpack處理 - 這意味着，圖像不會在生產中壓縮，並且不會創建.gz或.br版本。他們只會被複制過來。

要引用該文件，您可以在CSS中使用完整的URL。如果您使用相對路徑，Webpack將希望找到相對於源CSS的文件，並且它不起作用。同樣，把事情/static意味着文件將在其原始形式被複制，所以通過JS進口也不會正常工作。

的基本規則是：你要考慮「源」的任何靜態文件，放在src/或其他地方在您的項目路線。任何你想不處理複製或能夠動態導入，放在/static