password
type
status
date
slug
summary
tags
category
Property
Jul 25, 2023 06:41 AM
URL
icon
Google 和 Adobe 2015 年 6 月 16 日共同發表了開源的(免費的)思源黑體字型,可支援網頁使用的繁體中文字體、簡體中文字體、日文字體和韓文字體,在當年引起一陣騷動,受到大家的熱烈歡迎….後來在 Google Fonts 線上字體網站又再推出 5 款中文網路字型,直接給我們可以直接使用在我們的網頁上,在 CSS 中連結就可以使用。
文章段落列表
◦ 思源黑體下載網址一: https://www.google.com/get/noto/#sans-hant
◦ 思源黑體下載網址二:https://github.com/adobe-fonts/source-han-sans/tree/release
◦ 1. cwTeXKai (Chinese Traditional) 楷體字體
◦ 2. cwTeXYen (Chinese Traditional) 圓體字體
◦ 3. cwTeXFangSong (Chinese Traditional) 仿宋體字體
◦ 4. Noto Sans TC (Chinese Traditional) 黑體字體(思源黑體)
◦ 5. cwTeXMing (Chinese Traditional) 明體字體
◦ Google Fonts Early Access 網址:https://fonts.google.com/earlyaccess
• 1. Google fonts – cwTeXKai (Chinese Traditional) 楷體字體
• 2. Google fonts:cwTeXYen (Chinese Traditional) 圓體字體
• 3. Google fonts:cwTeXFangSong (Chinese Traditional) 仿宋體字體
• 4. Google fonts:Noto Sans TC (Chinese Traditional) 黑體(思源黑體)
• 5. Google fonts – cwTeXMing (Chinese Traditional) 明體字體
思源黑體下載網址一: https://www.google.com/get/noto/#sans-hant
![notion image](https://i2.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-01-5.gif?resize=800%2C600&t=46b82a35-22f9-44cf-a85f-49edcfb0dbdf)
Google Fonts
思源黑體下載網址二:https://github.com/adobe-fonts/source-han-sans/tree/release
![notion image](https://i0.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-02-4.gif?resize=800%2C600&t=b70178fb-1184-4871-abc8-d1ce3a541d08)
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 寫法如下:
![notion image](https://i2.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-03-2.gif?resize=800%2C290&t=af042c59-6b42-41b7-9854-28afcc774e7a)
在 font-weight:300; 字體粗細為 300 時,文字的呈現如下:
![notion image](https://i1.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-04-2.gif?resize=800%2C474&t=d37f0cb1-361c-44f1-ad96-12677dcd9273)
在 font-weight:800; 字體粗細為 800 時,文字的呈現如下:
![notion image](https://i0.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-05-2.gif?resize=800%2C474&t=5ee304cb-3626-4a1d-9f1e-a7cd1f94877f)
2. Google fonts:cwTeXYen (Chinese Traditional) 圓體字體
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
font-family: ‘cwTeXYen’, sans-serif;
CSS 寫法如下:
![notion image](https://i1.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-06-2.gif?resize=800%2C290&t=1bbd54d5-ddf2-46a4-8248-a59b26c2549d)
在 font-weight:300; 字體粗細為 300 時,文字的呈現如下:
![notion image](https://i2.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-07-4.gif?resize=800%2C474&t=6017e647-2a59-4328-b19f-b193ccde32b5)
在 font-weight:800; 字體粗細為 800 時,文字的呈現如下:
![notion image](https://i2.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-08-3.gif?resize=800%2C474&t=4000dbf1-9b10-4fd3-a5f9-179568defdb1)
3. Google fonts:cwTeXFangSong (Chinese Traditional) 仿宋體字體
@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
font-family: ‘cwTeXFangSong’, serif;
CSS 寫法如下:
![notion image](https://i1.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-09-2.gif?resize=800%2C273&t=60e012d5-6daf-43ef-92cc-fb930d189953)
在 font-weight:300; 字體粗細為 300 時,文字的呈現如下:
![notion image](https://i0.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-10-4.gif?resize=800%2C474&t=991fd1d7-e168-4321-a1bd-6ab03e07dd1d)
在 font-weight:800; 字體粗細為 800 時,文字的呈現如下:
![notion image](https://i0.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-11-4.gif?resize=800%2C474&t=46fac2f0-5ad8-467c-8ad8-e7ae42efb9aa)
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 寫法如下:
![notion image](https://i2.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-12-4.gif?resize=800%2C283&t=1c8f47ea-2720-42b5-80fa-14b47bbc7af6)
在 font-weight:100; 字體粗細為 100 時,文字的呈現如下:
![notion image](https://i2.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-13-4.gif?resize=800%2C474&t=51baa193-6f18-4e5b-9f26-066b3dc40efa)
在 font-weight:300; 字體粗細為 300 時,文字的呈現如下:
![notion image](https://i2.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-14-3.gif?resize=800%2C474&t=6fce743f-89d4-4efb-b565-94e41ab18d30)
在 font-weight:800; 字體粗細為 800 時,文字的呈現如下:
![notion image](https://i2.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-15-4.gif?resize=800%2C474&t=6ac5ec26-eb96-4440-8155-91eb87abcd4a)
5. Google fonts – cwTeXMing (Chinese Traditional) 明體字體
@import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css);
font-family: ‘cwTeXMing’, serif;
CSS 寫法如下:
![notion image](https://i2.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-16-4.gif?resize=800%2C283&t=475a179a-6205-4684-8886-8fc0b0b225f3)
在 font-weight:100; 字體粗細為 100 時,文字的呈現如下:
![notion image](https://i1.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-17-4.gif?resize=800%2C474&t=45c5cf86-510b-42e6-91db-505f40e2dbdd)
在 font-weight:300; 字體粗細為 300 時,文字的呈現如下(沒什麼差別):
![notion image](https://i1.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-18-4.gif?resize=800%2C474&t=7212e1d9-5020-4bd6-8db5-c3fb1d1c3b84)
在 font-weight:800; 字體粗細為 800 時,文字的呈現如下:
![notion image](https://i2.wp.com/www.flycan.com/article/wp-content/uploads/2017/08/FLY-19-4.gif?resize=800%2C474&t=b591ec22-710c-418c-b7bc-8816c95ae5c9)
以上我們為大家呈現了 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 願意提供這麼多免費的開源字體給我們使用,感謝!
- 作者:李维京
- 链接:https://vikim.cyou//article/gogolefonts2015
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。