本篇文章為我在 hahow 的線上課程《不小心就學會！用 UI 設計方法製作網站》預習教材，若讀者對於 UI 設計與網站架設有興趣的話，可以來一起上課噢～Webfont 網頁字型是許多剛開始學習 UI 設計或網站開發的同學容易弄不懂的一門技術，特別是原本已經習慣用 Illustrator 或 Photoshop 等電腦繪圖軟體的平面設計師——「嗯？啊不是就換個字體而已嗎？🤔」。
的確，如果在 UI 設計軟體（如 Adobe Xd）中是可以直接切換介面中的字體，但是很容易發生的慘劇是這樣——當我們已經設計好整個網站的 UI 介面，排版、字體大小、距離全都調整完美之後，把設計稿交給工程師卻直接被打槍：「ㄜ⋯這個字型沒辦法用在網站上喔😑」。
我們都知道，在 UI 介面上換個不同的字體，幾乎等同於全部要重來，因為排版、風格全都不同了，這其中到底發生什麼事？難道是工程師電腦沒有這套字嗎？早說嘛我傳給你啊（😤 喂！才不是！！）
先來認識什麼是 Webfont
要先知道，網站放在網路上，是要給全世界的人看的，那些傢伙會用各種裝置去瀏覽，比如說 iPhone、筆電，或是網咖裡的電競桌機，這些人看到的網頁都會長得一樣嗎？其實光是瀏覽裝置尺寸不同、顯示器色彩不同，都會讓同一個網站天差地遠，長得連設計師她媽媽都認不出來，而這也是 UI 設計師棘手的課題之一，但今天我們先來討論字體顯示就好。
一般來說，使用者看的網頁中的字體，會因為「作業系統預設」與「瀏覽器設定」而不同，比如說微軟正黑體或蘋方體；所以即便你今天在網站設計稿上用了 justfont 的金萱那提字型好了，也沒辦法讓大家瀏覽網頁的時候也看到相同效果，畢竟他們電腦不一定有這套字型。
有一種粗暴的方法，就是請工程師直接把字體檔案上傳到網站當中，但這樣一來除了字型授權可能違反之外，每次使用者瀏覽網頁的時候，都得重新下載一次這套字體，以繁體中文中華五千年歷史以來的字數來說，至少要另外等網頁載入 10 秒以上吧⋯
如果是英文的字體也許能這樣子搞，畢竟只有 A~Z 大小寫跟一些符號，字體檔案小很多。
但我們今天要接觸的網頁設計，應該多是中文網站吧，那這個時候，網頁字型(Webfont) 就能派上用場！這是一個基於網路雲端的字型嵌入技術，可以讓使用者瀏覽網頁的時候，在有連網的狀態下，直接將網頁中的文字置換成指定字型。
那麼，技術上該怎麼做呢？有追蹤我 Medium 的讀者應該很清楚，我們通常不會只講觀念而已的對吧 😊（對～～）接下來就讓我們繼續看下去，如何在網頁中使用今天推薦的三個繁體中文網頁字型服務。
壹、「思源黑體」
又稱為 Noto Sans CJK TC（電腦中字型顯示是這個名稱）是 Google 與 Adobe 合作推出的免費、開放原始碼字型，你除了可以下載到電腦做使用之外，同樣也可以利用其 Webfont 網頁字型服務，將思源黑體嵌入到網站當中。
首先呢，你的電腦需要先有這套字體：
接下來呢，我們到 Google Fonts 的網站，找到 Noto Sans TC 的頁面，在網頁右側就會看到一段 Embed 的嵌入碼，把這段貼到網站的 <head> tag 裡面就好了，那如果是有工程師在的話，就跟他說你要這用這套網頁字型就好了。
然後還有啊，Google Fonts 上也有思源宋體，也就是有襯線的中文字型，同樣可以運用在 Webfont 當中。
補充資訊：如果早期有用過 Google 家 Early Access 的網頁字型服務，應該有看過圓體，但在現在正式的 Google Fonts 中被移除了，經實測以前的嵌入仍然可用，但已經不太穩定，所以這邊沒有列出推薦。那其實大部分的網頁字型都是這樣子運作的，只要成功嵌入網站當中，接下來就是 CSS font-family 去設定就好，像這樣：
font-family: ‘Noto Sans TC’, sans-serif;只是說，思源黑體因為是免費的，又滿多人也都會用，在設計呈現上可能就沒那麼特別，如果你今天想要做更有設計感的網站，只要加上一點點的預算就可以達成噢！讓我們接著看：
貳、「justfont 金萱字型」
很多設計人都知道 justfont 推出的募資字型金萱，但也有很多人不曉得的是，其實這間公司在一開始 2010 年創立之後，就推出了世界上第一個中文的網頁字型（webfont）服務。
而且，最受大家喜愛的金萱字型，以及最近更新的金萱那提、粉圓等字型，也都同樣可以運用在網頁當中，所以可以放心地在軟體中套用並藉此設計 UI 介面。
價格的部分則是如下圖，其實滿便宜的，然後如果還不確定在網頁中的呈現效果怎麼樣，也可以先用免費會員試試看（但使用字型有限）。
那我自己拿來放在 Instagram 上的個人網址，就也是使用 justfont 的企業 VIP 方案（才能套用在 https:// 的網址中）有興趣的話可以去看看效果怎麼樣：
而在這個例子中，我所使用的是 信黑體繁體W3 font-weight: 300 以及 金萱那提半糖 font-weight: 500 這兩套字型服務，分別當作內文與標題使用；而在後台的設定介面則也滿簡單的，只要輸入套用網址、選好要用的字型，並將 JavaScript 的程式碼放進網頁當中，就完成了。
參、「iFontCloud 文鼎雲字庫」
如果之前參加過我們 Adobe Xd Taiwan 社群所舉辦的實體小聚，應該對這個都不陌生吧！沒錯，就是我跑去跟文鼎字型要來的 Webfont 體驗包，當時就是為了推廣讓更多 UI 設計師能夠玩玩看網頁字型的應用。
而在文鼎這套網頁雲端服務當中呢，我們一樣是只要先選擇要用的字型，這邊如果太多不知道該怎麼選的話，很推薦他們家最有名的文鼎UD晶熙黑，各種字重都有，能符合更多種不同的使用情境。
那操作方式其實也都差不多，這邊就不多講了，iFontCloud 文鼎雲字庫 個人版一年只要 499 元，就能讓網頁呈現不同的風貌，其實是滿值得的投資～
更新）讀者發問：Webfont 可以直接套用在設計稿中嗎？
Webfont 只能運用在開發環境中，也就是在網站開發狀態下，即時套用。如果要在桌面軟體（比如說 Adobe Xd 或 Sketch）要使用該字體，則仍需要該字型公司的字體授權使用，本篇文章中舉的三家廠商都有提供販售授權。
舉例來說，我們今天要先購買 justfont 的金萱字體，並用在 UI 軟體中的設計稿上，待要正式開發成網站時，要再另外購買 Webfont 網頁字型服務。
重點總結：網頁設計的字體很重要！
好啦，以上就是今天對於網頁字型 Webfont 的介紹與中文廠商推薦，都是我自己用過且實際能派上用場的服務，分享給大家！
其實字型在網頁 UI 的設計上佔有很大的關鍵地位，但卻也是最容易被忽略的（畢竟中文選擇並不多），字體會影響排版、易讀性、風格等等，選擇到適合的網頁字體，不僅能讓網頁更有設計質感，還能夠有效提升使用者體驗呢！
噢對了，我最近開始做了設計主題的電子報，如果有興趣收到更多設計技巧、方法或教學文章的話，歡迎在這邊直接訂閱噢！😀 不用錢啦～
我是 林育正 Riven 我們下次見囉！掰掰～ 🙂
Facebook / Instagram / YouTube / 粉絲專頁 / Telegram / ..更多關於我
