Google Fonts 更新了，於是來說說網頁字體

01-26

好久不見啦，很慚愧拖了這麼久才更新。繼開篇討論了字體的一些最最基本的概念後，這篇又忍不住想要說下字體的事。

網頁中使用字體（特別是中文）一向比較麻煩，尤其你是一個對字體非常挑剔的設計師，或者你設計的質感很大程度上是依賴字體的話。使用用戶終端沒有的字體，意味著你需要在遠程伺服器上放龐大的字體包（中文字體尤甚），這非常低效，載入幾十 KB 的網頁卻要為了下載幾 MB 至幾十 MB 不等的字型檔等幾十秒或幾分鐘，對用戶來說這將是多麼糟糕的體驗，而做小項目或個人網站採用這種字體解決方案就更是沒有必要得不償失了。

於是一種常用解決方案是直接取不同用戶終端的默認字體，在網頁樣式里設置一個字體優先順序，這種做法能滿足大多數網站的常規字體需求。

比如小編常用的方案：

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue","Helvetica",PingFang SC,PingFang TC,Hiragino Sans GB,STHeiti,Microsoft YaHei,Microsoft JhengHei,"WenQuanYi Micro Hei",sans-serif

但是設計師通常不會滿足於「常規」，你對網頁字體風格、字重等都有極苛刻要求的話，中文的解決辦法可以是將某字型檔中你所需要的漢字打包成一個比較小的字體包，隨網頁載入時一起呈現在用戶終端。當然不談中文英文字體的話，成本最低也最具可靠性的方案還是使用 Web Font 。

說到 Web Font，最近知名開源免費在線字體庫 Google Fonts 迎來了更新，對 Google Fonts（https://fonts.google.com/）整站進行了 Material Design 化的重設計。通過網頁設計上的優化，幫助用戶更便捷地瀏覽和使用 Google Fonts。

* 直接輸入字元動態展示對應字體效果

* 推出了幾款精美字體合集，更快找到想要的高質量字體

側欄 filter 可根據字體類別、排序維度、語言、字體特徵來進行過濾，以便挑選到自己最想要的那一款字體。

進入字體頁面，側欄新增「相關信息」比如：作者簡介、字體簡介、使用人數及地區分布、License 等，於是實在不知道怎麼判斷字體優劣或選擇困難症發作時，你可以選擇大師作品、又或者「隨大流」選擇使用人數多的字體~

同時 Google Fonts 還會推薦一些適合與該字體搭配風格較為類似的其他字體。

當然，最顯而易見地就是 VI 延續了 Material Design 的風格。

包括圖標——無襯線大寫 F + 淡淡長陰影 + 取自 MD 色板里的亮紅色 ——可以，這很 MD！

另外，在中國大陸地區，網頁里引用 Google Font APIs 時，理論上 https://fonts.googleapis.com 的 googleapis.com 是沒有被 [ 嗶—— ] 的，但實際上還是會有不穩定的情況出現，所以如果你的網頁受眾多在中國大陸地區，那麼可以考慮一些國內字體 CDN，這樣的資源你可以 Google 一下找到，這裡就不再細說。

於是在此也對應推薦一個第三方的 Google Fonts Photoshop / Sketch 插件 Fontea （下載地址：Fontea | Google fonts in Photoshop & Sketch, plugin by madebysource），方便在工具內做圖時使用。

另外，Adobe Typekit 也是一個很不錯的字體訂閱服務，可將字體同步至你的電腦或網站當中。

現在 Adobe Creative 系列裡 Photoshop、Illustrator 等都自帶 Typekit 字體同步功能。

同時你也可以用 Typekit 自帶的 Kits 管理你的網站里所使用的字體。Typekit 不太一樣的是其中的字體不是獨立授權，而是訂閱服務按時間周期收費，因此 Typekit 並非完全免費，目前主要 4 種定價策略 Plan。

如果想購買更多商業計算機字體（包括 Web Font），你還可以到蒙納公司的 http://MyFonts.com 看看，其中有個工具叫「WhatTheFont」能讀圖識別字體還挺有趣~

再到中文字體的在線資源 justfont （http://www.justfont.com/ )提供了豐富的在線中文字體資源，但不是完全免費。

然而最後回到現實，現有各種工具提供的網頁上可用的中文字體解決方案其實都極其有限，也可以說中文字體資源本身還不夠豐富，一大原因就是中文字體製作成本相當高，高質量字體更是只能由頂尖商業公司才有能力完成，於是精品字體數量不算多，授權費用也相當昂貴。所以目前很多對字體要求苛刻的設計師包括小編自己在部分網頁上會偏好使用西文字體。

最後說說我常用的免費 Web Font 僅供參考（除去各系統默認字體，開篇字體優先順序里可參考）：Open Sans、Lato、PT Sans、Lobster、Rokkitt……當然還是那句話，適合的才是最好的。

更多字體知識，小編還會再講的，本篇就說到這裡，如果有什麼特別感興趣的關於字體的或者其他設計領域的話題和問題歡迎留言~~

想看更多工友關於設計的分享？

可以關注以下帳號

內容會跟專欄不太一樣的微信公眾號: @workshed

Instagram: @hominthesky · @gingerbread0912

歡迎關注和反饋 ^ ^