英國研究證實,大部分設計師剛接觸網頁架設時只會花時間鑽研如何改字體、大小及字距。老是被問,就乾脆寫成文章了。
從大學唸了設計系後,就開始會注意路上、包裝跟電腦裡的字體,經歷過「康熙字典體之亂」也有幸在大二時受 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;/* 行高 */ }
就先這樣囉,我們下次見~