fbpx

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

這次要介紹一個免費的字體網站,那就是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; (中文字體)

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

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

(沒寫一起時)
(寫一起後)
以上是字體更換的步驟,希望大家都能找到喜歡的字體。

Leave a Reply