一、通過Google Fonts資源引入字體方式
在項目index.html , 通過Link標簽在網頁頭部引用
<head> <meta charset="utf-8"> <!--引入思源黑字體--> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900"> <title></title>
代碼使用如下
#app { font-family: Noto Sans SC; font-style: normal; font-weight: 400; }
使用就這么簡單!
注意一下幾點:
1、此字體:Noto Sans SC,大小:100, 300, 400, 500, 700, 900 這幾種樣式. font-weight: 后面必須加入對應100.300等數字,否則是不生效的. (通常 font-weight: bold 我用的是 700字體,這個看大家自己需求了,可以自己更改數字)
2、第一次使用的時候,文字部分沒有馬上加載出來,而是空白,等到重定向並下載完后才顯示出來,所以在引用的時候,直接用fonts.proxy.ustclug.org是不是會更好。(這里也看你個人習慣選擇,鏈接:https://lug.ustc.edu.cn/wiki/lug/services/googlefonts)
3、Google Fonts網站雖然不能訪問,但引用的資源卻能正常使用,當然,無法通過Google Fonts網站查找想要的字體,資源能訪問也是白搭
>>>>>>>>>>順便講解下思源黑體,宋體
這里提供思源宋體,思源黑體的引用鏈接:
思源黑體:https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900
黑體有6個不同的寬度,對應如下:
思源宋體:https://fonts.googleapis.com/css?family=Noto+Serif+SC:200,300,400,500,600,700,900
宋體有7個寬度,其中Regular 400是默認的寬度:
不同寬度
黑體宋體一起使用:https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900|Noto+Serif+SC:200,300,400,500,600,700,900