Google提供的免費繁體中文字體

2023-05-08
關於繁體字型,google font並沒有直接將它的使用公開在google font api裡面,所以只能透過earlyaccess的URI來使用,以下紀錄的字體以及使用方式:

1. Google fonts – cwTeXKai (Chinese Traditional) 楷體字體

@import url('https://fonts.googleapis.com/earlyaccess/cwtexkai.css');

font-family:  'cwTeXKai', serif;


2. Google fonts:cwTeXYen (Chinese Traditional) 圓體字體

@import url('https://fonts.googleapis.com/earlyaccess/cwtexyen.css');

font-family: 'cwTeXYen', sans-serif;


3. Google fonts:cwTeXFangSong (Chinese Traditional) 仿宋體字體

@import url('https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css');

font-family: 'cwTeXFangSong', serif;


4. Google fonts:Noto Sans TC (Chinese Traditional) 黑體(思源黑體)

@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');

font-family: 'Noto Sans TC', sans-serif;


在css中要這樣寫:

@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');

body{
   font-family: 'Noto Sans TC', sans-serif;
}


也可以一起使用
@import url('https://fonts.googleapis.com/earlyaccess/cwtexyen.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');

body{
   font-family: 'Noto Sans TC',  'cwTeXYen', sans-serif;
}

h1{
   font-family: 'cwTeXYen', sans-serif;
}
上面範例為整個頁面都用Noto Sans TC字體,如果沒有找到的字體就往下一個找,缺字也會往下一個找
h1就定義只用cwTeXYen字體,沒有再往下一個找,以此類推

可以透過以下方式進行預覽 

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【696580】
digishot webdesign studio