04-20-2019

Laravel_字體替換

 

這次真的是字體的介紹了,是不是覺得網頁的字體醜醜的或是不是想要的風格呢?

這次要介紹一個免費的字體網站,那就是Google Fonts

他不只提供免費的字體還會跟你說你的匯入程式要怎麼寫,是不是很貼心阿~

 

Step1.

 

到Google Fonts

 

 

看中你喜歡的字體後,按他右上角的+。

 

 

按了之後它會出現這個,很貼心的跟你說要怎麼使用它。

 

Step2.

 

Import 字體

 

 

這裡我們選擇用import的方式,打開app.scss,

將google給的程式碼貼上去(記得npm run watch喔)。

 

 

在style.scss補上google給的css寫法。

 

Step3.

 

測試

 

看看字體是不是符合自己的期待,不是的話就試其他的。

那如果內容裡面同時有中文和英文的怎麼辦呢?

免驚,看這篇文章朋友們有福了,import的部分就照它給的寫,

scss的部分呢,以下是示範:

 

 

  1. font-family: 'Margarine', cursive; (英文字體)

  2. font-family: 'Noto Sans TC', sans-serif; (中文字體)

 

 

當我們想要同一行中顯示中文又顯示英文的時候,

必須這樣寫英文字體,'中文字體',這樣才能偵測得到。

 

 

                                                (沒寫一起時) (寫一起後)

 

 

以上是字體更換的步驟,希望大家都能找到喜歡的字體。