Vue項目引入字體(思源黑體)


一、通過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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM