Google Fonts 線上字體推出 5 款免費的中文網頁字型

Google 和 Adobe 2015 年 6 月 16 日共同發表了開源的(免費的)思源黑體字型,可支援網頁使用的繁體中文字體、簡體中文字體、日文字體和韓文字體,在當年引起一陣騷動,受到大家的熱烈歡迎….後來在 Google Fonts 線上字體網站又再推出 5 款中文網路字型,直接給我們可以直接使用在我們的網頁上,在 CSS 中連結就可以使用。

思源黑體下載網址一: https://www.google.com/get/noto/#sans-hant

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-01-5

Google Fonts

 

思源黑體下載網址二:https://github.com/adobe-fonts/source-han-sans/tree/release

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-02-4

google fonts

不久之後 Google 又再推出 5 款免費的中文網頁字體,真是佛心來的!

1. cwTeXKai (Chinese Traditional) 楷體字體

2. cwTeXYen (Chinese Traditional) 圓體字體

3. cwTeXFangSong (Chinese Traditional) 仿宋體字體

4. Noto Sans TC (Chinese Traditional) 黑體字體(思源黑體)

5. cwTeXMing (Chinese Traditional) 明體字體

 

不過,目前在  Google Fonts 網站上還找不到這 5 個字體 ,因為這 5 個字型目前是被放到 Google Fonts Early Access 的地方。

Google Fonts Early Access 網址:https://fonts.google.com/earlyaccess

簡單的說就是測試區,還未正式發表,雖然如此,我們還是可以正常的在網頁上使用這些新的中文網路字體

以下我們就為大家介紹如何使用這些 Google 推出的新的中文網路字體


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

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

font-family: ‘cwTeXKai’, serif;

CSS 寫法如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-03-2

在 font-weight:300; 字體粗細為 300 時,文字的呈現如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-04-2

在 font-weight:800; 字體粗細為 800 時,文字的呈現如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-05-2

 


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

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

font-family: ‘cwTeXYen’, sans-serif;

CSS 寫法如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-06-2

在 font-weight:300; 字體粗細為 300 時,文字的呈現如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-07-4

在 font-weight:800; 字體粗細為 800 時,文字的呈現如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-08-3

 


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

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

font-family: ‘cwTeXFangSong’, serif;

CSS 寫法如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-09-2

在 font-weight:300; 字體粗細為 300 時,文字的呈現如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-10-4

在 font-weight:800; 字體粗細為 800 時,文字的呈現如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-11-4

 


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 寫法如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-12-4

在 font-weight:100; 字體粗細為 100 時,文字的呈現如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-13-4

在 font-weight:300; 字體粗細為 300 時,文字的呈現如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-14-3

在 font-weight:800; 字體粗細為 800 時,文字的呈現如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-15-4


5. Google fonts – cwTeXMing (Chinese Traditional) 明體字體

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

font-family: ‘cwTeXMing’, serif;

CSS 寫法如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-16-4

在 font-weight:100; 字體粗細為 100 時,文字的呈現如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-17-4

在 font-weight:300; 字體粗細為 300 時,文字的呈現如下(沒什麼差別):

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-18-4

在 font-weight:800; 字體粗細為 800 時,文字的呈現如下:

CSS 教學 - 網頁排版 Free Resource 好康報報  - Google Fonts 線上字體推出 5 款免費的中文網頁字型 - FLY-19-4


以上我們為大家呈現了 5 種不同的 Google 所提供的中文網路字型:

1. cwTeXKai (Chinese Traditional) 楷體字體

2. cwTeXYen (Chinese Traditional) 圓體字體

3. cwTeXFangSong (Chinese Traditional) 仿宋體字體

4. Noto Sans TC (Chinese Traditional) 黑體字體(思源黑體)

5. cwTeXMing (Chinese Traditional) 明體字體

並且對於每個字型我們都幫大家調整出幾種不同的 font-weight 字體粗細的展示結果。

基本上還是以 Noto Sans TC (Chinese Traditional) 黑體(思源黑體)開發的比較早,又是和 Adobe 公司一起開發的,所以思源黑體可以設定的 font-weight 字體粗細的變化比較多樣化,從最細到最粗,大家都可以試試看他呈現出不同的風格。

我覺得他的圓體、黑體和明體使用在網頁上都好好看,比起我們這幾年一直在使用的 細明體 或 微軟正黑體 是不是好看多了呢!

最後還是很感謝 Google 願意提供這麼多免費的開源字體給我們使用,感謝!

 

 

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

關於「姜智豪 老師」

於 1996 年開始從事網頁設計工作 20 多年,參與設計過許多網站專案的開發,一直熱衷網頁設計工作至今。從 1998 年開始從事教學工作,對於網頁設計教學有相當高的熱忱,於 2006 年創立飛肯設計學苑。主要專長 Photoashop、 HTML、CSS、RWD、JavaScript、jQuery 等網頁技術,對於 SEO 優化搜尋引擎排名提昇,以及 Instructional Design 教學專案設計亦有深入的研究。
posted in CSS 教學 - 網頁排版, Free Resource 好康報報 and tagged , , , , , , .

留言功能已關閉。