如何在React專案中引入字型檔案並使用詳解

2022-08-12 18:01:22

前言

在做React專案的時候，發現UI設計給出的設計稿裡，某些文字所用的字型，系統預設不支援。比如設計需要的這個字型：EmerlandRegular，即使在css裡將文字字型設定為他們，實際效果也顯示不出來。

            <Typography
              style={{
                fontSize:'22px',
                fontFamily:'EmerlandRegular',
                textAlign:'center',
                color:'#3A3A3A',
                marginTop: '10px',
              }}
            >
              This teacher is good
            </Typography>

期待效果：

實際效果：

實際上是因為這個字型不在系統的預置字型庫裡，所以找不到，就顯示了預設的字型樣式。要想達到期待的字型效果，需要把字型檔案引入專案才行。

下面講下如何引入字型檔案並使用

一、下載字型包

這一步就不多說了，字型包從網上找，或者讓UI設計師提供給你。

下載好的字型包一般是個壓縮包，開啟後有多個字型檔案，如圖：

這麼多字型檔案，哪個是我們需要的呢，看檔名，分為兩種，帶italic的和不帶的，顯然帶italic的就是斜體字檔案，而不帶italic的就是我們想要的正常字型檔案。但是字尾又有otf, ttf, woff幾種，選哪個呢，其實這幾種都是檔案格式有區別，顯示出來一般是沒什麼區別的，就跟word檔案也可以存為好幾種檔案字尾一樣，可以隨意選一種先看看。這裡我們使用 Emerland.ttf檔案。

二、將字型檔案放到專案裡

1.在專案public資料夾下新建一個fonts資料夾，用於存放字型，然後將字型檔案複製到這個資料夾下。

2.在public下新建一個font.css，檔案內容里加上對新引入的字型的定義：

@font-face {  
  font-family: EmerlandRegular;  
  src: url('./fonts/Emerland.ttf');
}

這就宣告了一種新字型，字型名叫EmerlandRegular，字型檔案的路徑就是src指定的路徑。

上面這兩步如圖：

3.修改index.html檔案，新增這一行：

    <link rel="stylesheet" href="%PUBLIC_URL%/font.css" rel="external nofollow" >

新增位置如圖：

這樣，就成功的把字型檔案引入專案了。

三、使用新字型

因為我們在font.css裡給新字型起的名叫EmerlandRegular，所以在使用的時候，就像以前那樣，給需要的文字設定fontFamily為"EmerlandRegular"即可。

fontFamily:'EmerlandRegular'

執行即可看到字型效果已經成功顯示了。

總結

到此這篇關於如何在React專案中引入字型檔案並使用的文章就介紹到這了,更多相關React專案引入字型檔案內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

如何在React專案中引入字型檔案並使用詳解

目錄

前言

下面講下如何引入字型檔案並使用

一、下載字型包

二、將字型檔案放到專案裡

三、使用新字型

總結

熱門文章