Vue项目引入字体(思源黑体)
一、通過Google Fonts資源引入字體方式
在項目index.html , 通過Link標簽在網頁頭部引用
<head> <meta charset="utf-8"> <!--引入思源黑字體--> <link rel="stylesheet" > <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.lug.ustc.edu.cn/css?family=Noto+Sans+SC:100,300,400,500,700,900
黑體有6個不同的寬度，對應如下：
思源宋體：https://fonts.lug.ustc.edu.cn/css?family=Noto+Serif+SC:200,300,400,500,600,700,900
宋體有7個寬度，其中Regular 400是默認的寬度：
不同寬度
黑體宋體一起使用：https://fonts.lug.ustc.edu.cn/css?family=Noto+Sans+SC:100,300,400,500,700,900|Noto+Serif+SC:200,300,400,500,600,700,900
總結
以上是生活随笔為你收集整理的Vue项目引入字体(思源黑体)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： NO.8：自学python之路-----
- 下一篇： 我的电子辞典