這次真的是字體的介紹了,是不是覺得網頁的字體醜醜的或是不是想要的風格呢?
這次要介紹一個免費的字體網站,那就是Google Fonts,
他不只提供免費的字體還會跟你說你的匯入程式要怎麼寫,是不是很貼心阿~
Step1.
到Google Fonts
看中你喜歡的字體後,按他右上角的+。
按了之後它會出現這個,很貼心的跟你說要怎麼使用它。
Step2.
Import 字體
這裡我們選擇用import的方式,打開app.scss,
將google給的程式碼貼上去(記得npm run watch喔)。
在style.scss補上google給的css寫法。
Step3.
測試
看看字體是不是符合自己的期待,不是的話就試其他的。
那如果內容裡面同時有中文和英文的怎麼辦呢?
免驚,看這篇文章朋友們有福了,import的部分就照它給的寫,
scss的部分呢,以下是示範:
- font-family: ‘Margarine’, cursive; (英文字體)
- font-family: ‘Noto Sans TC’, sans-serif; (中文字體)
當我們想要同一行中顯示中文又顯示英文的時候,
必須這樣寫英文字體,’中文字體’,這樣才能偵測得到。
(沒寫一起時)
(寫一起後)
以上是字體更換的步驟,希望大家都能找到喜歡的字體。