英國研究證實，大部分設計師剛接觸網頁架設時只會花時間鑽研如何改字體、大小及字距。老是被問，就乾脆寫成文章了。
從大學唸了設計系後，就開始會注意路上、包裝跟電腦裡的字體，經歷過「康熙字典體之亂」也有幸在大二時受 justfont (那時候還沒有金萱字體) 來校指導字構，因此對字體的敏銳度略懂略懂。
在網頁設計時字體一直都是佔非常大的比例，用過國外的版型就知道，原本美美的主題一改成中文全都「招驚去」！
是的，網頁可以用的中文字體就是這麼少的可憐。不少剛接觸網頁製作的人會問說「不能夠安裝字體嗎？像Illustrator那樣改～」
答案是可以的。技術上將字體安裝在主機上可以讓網站呈現該字體，但「每跑一次網頁」就要「重新下載一次」，中文字體檔案又是出名的肥，這樣做會讓網頁瀏覽速度降低非常多，也會直接影響使用體驗。
也因此才有像 justfont 這樣提供中文網頁字型服務的公司，提供的字體庫在功能完整度、顯示速度以及字型品質上都非常要求，能夠讓設計師隨時瀏覽到高品質的字型。我很喜歡他們首頁說到的「字型是完美設計的靈魂。」
地球上大多網頁字體服務皆是以流量計費。
時間來到 2015年， Google Fonts 推出免費 早鳥中文網頁字體 ，簡單來說就是在 beta版 （中國五千年文化累積的字庫相當驚人）
前一兩年都還可以用，直到最近新架的網站似乎都串不上去，回去查早鳥網頁竟然發現繁體中文竟然只剩下 Noto Sans TC(思源黑體)！
若是想用「 Noto Sans TC (Chinese Traditional) 黑體字體（思源黑體）」遵循以下步驟：
Noto Sans TC (Chinese Traditional) 黑體字體（思源黑體）
在自訂Css貼上： @import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);示範： font-family: ‘Noto Sans TC’, sans-serif;
但在做一些可愛或日系的網頁的時候，常會需要搭配圓體做展示，像是Monospace的初心者進駐計畫 。
既然Google把圓體收掉了只好自己來了～ 先上網爬了文發現都是舊文章，可能是最近才收掉的！研究了一下以下附上解決懶人包：
在WordPress後台找到編輯自訂CSS的地方，貼入以下圓體代碼
cwTeXYen (Chinese Traditional) 圓體字體
@font-face { /*圓體*/ font-family: ‘cwTeXYen’; font-style: normal; font-weight: 500; src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot); src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot?#iefix) format(‘embedded-opentype’), url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff2) format(‘woff2’), url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff) format(‘woff’), url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.ttf) format(‘truetype’); }這樣就完成囉，是不是很簡單呢？
來看看在網頁上的呈現效果：
其他還有 cwTeXFangSong（仿宋體）、cwTeXKai（楷體）、cwTeXHei（黑體）：
cwTeXFangSong（仿宋體）
@font-face { /*仿宋*/ font-family: ‘cwTeXFangSong’; font-style: normal; font-weight: 500; src: url(//fonts.gstatic.com/ea/cwtexfangsong/v3/cwTeXFangSong-zhonly.eot); src: url(//fonts.gstatic.com/ea/cwtexfangsong/v3/cwTeXFangSong-zhonly.eot?#iefix) format(‘embedded-opentype’), url(//fonts.gstatic.com/ea/cwtexfangsong/v3/cwTeXFangSong-zhonly.woff2) format(‘woff2’), url(//fonts.gstatic.com/ea/cwtexfangsong/v3/cwTeXFangSong-zhonly.woff) format(‘woff’), url(//fonts.gstatic.com/ea/cwtexfangsong/v3/cwTeXFangSong-zhonly.ttf) format(‘truetype’); }cwTeXKai（楷體）
@font-face { /*楷體*/ font-family: ‘cwTeXKai’; font-style: normal; font-weight: 500; src: url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.eot); src: url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.eot?#iefix) format(‘embedded-opentype’), url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.woff2) format(‘woff2’), url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.woff) format(‘woff’), url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.ttf) format(‘truetype’); }cwTeXHei（黑體）
@font-face { /*黑體*/ font-family: ‘cwTeXHei’; font-style: normal; font-weight: 500; src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot); src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix) format(‘embedded-opentype’), url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2) format(‘woff2’), url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff) format(‘woff’), url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf) format(‘truetype’); }調整「大小、字距、行高」
找到要改的區域元素，如果是標題，則會是 h1, h2, h3 ，內文則是 p 。
如果我要改文章的內容大小，則可以依照下方去修改。
p { font-size: 18px; /* 字的大小 */ letter-spacing: 1px;/* 字距 */ line-height: 30px;/* 行高 */ }就先這樣囉，我們下次見～
