為什麼是 PingFang SC ？

在 Anyway.FM 第 12 期里，討論了一個聽眾反饋的問題：「Anyway.FM 官網的 font-family 首選了 PingFang SC，而不是系統默認英文字體，應該是個 bug」，然後我發現用純語言討論這事情非常蛋疼，口都說幹了，Leon 也被我說睡著了，但似乎還木有說清楚，所以特別記錄一下這個 bug 的誕生過程，以及在 Anyway.FM 網站設計上線時的完整糾結過程。

先確定一下主要的場景，因為網站上線前我也不知道詳細數據，只能假想聽眾和我自己的博客比較重合，數據大概差不多。事實上後來的實際數據顯示 Anyway.FM 的網站用戶使用現代瀏覽器的比例更高一些，Mac 平台的比例也高不少，UV 大致情況如下：

Round 1

根據上面這些大致的數據，基本上從一開始就是本著「優雅降級」的策略先考慮 Mac 平台的效果，然後再兼顧 Windows 和移動端。策劃節目前幾期的時候我就設計了網站第一個草稿，好吧，說是設計其實從頭到尾也都沒有打過啥設計稿，直接碼了個靜態頁面。標題字體選用的是兩個 web font，西文部分是 Merriweather，中文部分是鄰國日本的 TypeSquare 的漢儀粗宋，大致效果如下，線上 Demo 在此，不過 Merriweather 尚未載入，只是 CSS 里指定了一下。

之前也提到過森澤的 TypeSquare 雲字體服務，雖然支持的簡體字數量不多（十幾個，不算各種粗細大概只有幾個家族），但質量都不錯、配置方便而且筆畫都是遵守大陸習慣的（這點比起來自寶島的雲字體服務 justfont 提供的字體要好），當然因為伺服器不在國內速度不夠理想。另外註冊也是個問題，因為網頁僅支持日文，所以依稀記得我當初是開著翻譯軟體研究了半天日本假地址和各種專業術語才終於能上手使用了 ㄟ( ▔, ▔ )ㄏ

西文部分的這個 Merriweather 一直是我挺喜歡的可以在 Google Fonts 里調用的 web font，跟漢儀粗宋一樣有不少筆畫粗細的變化而且也有字重差不多的配合，所以就這麼搭配了，從視覺效果上來說這樣的 web font 組合肯定能做到比較好，畢竟在移動端也是支持的，在 iOS 端網頁上應用宋體也是可以實現的了。

Round 2

以上面那個稿子做主基調我開始細化網頁，然後在填充內容的時候我想到用打字機的效果來逐步展現我們的 slogan，用比較親民+調侃的風格帶出我們節目的特性和關鍵內容，這個打字機效果也有朋友問過，用的是在 t.js，代碼在 GitHub 上有：GitHub - mntn-dev/t.js: $.Typewriter w/ nice features like HTML support

執著地確定了這個效果之後誕生了一個問題，假如在某些情況下兩個 web font 載入比較慢，隔了幾秒才顯示的話打字效果就打折扣了，可能等後台字都顯示完整句了字體才載入出來，所以只能忍痛割愛拋棄了用 web font 的念頭。然後那會兒也和 Leon 分頭開始認真設計 Anyway.FM 的 Logo，我自己出的第一個比較滿意的方案是下圖裡那個波形，用一串波峰波谷拼出「A」和「W」，同時也表現出我們是個聲音類的節目。然後因為用回黑體覺得缺了些個性和變化，而且 Logo 本身也是偏簡單的，所以在網頁頭部用了深色、加了動畫，效果如下圖，Demo 在此：http://anyway.fm/misc/old/index.html

Round 3

然後在某一個風和日麗的周末，Leon 的那個觸手系 logo 誕生了！雖然我們擔心這個 logo 會略複雜，不過觸手們散發出的非常 organic 的「散漫感」還是挺有趣的，經過調整之後我們還是確定使用了，所以之前的網頁版本又打回去重來了~這第三版回到了系統默認字體的老路，我嘗試搭配了 Palatino 和 Mac 自帶的 Songti SC（華文宋體），你看我對襯線字體是多麼執著……配色上改用了熒光筆的黃色，想做出手塗關鍵詞的感覺。

跟目前線上版本網頁一樣，這個 Demo 也在四周加了主題色的邊框（這個框也是個深坑，想來很簡單的形式，事實上在新的 iOS Safari 上無 bug 實現我也是最近才搞定，辛酸也足夠再寫一篇博文了……）。當時已經開始嘗試這種四周邊框風格的節目封面，所以希望能跟網站有一定的聯繫，不過也是因為在同步嘗試封面，所以意識到標題字體使用 Palatino + 華文宋體的統一性問題，除了移動端和桌面端沒法統一之外，與第三方平台上出現的我們節目的 logo 也沒法統一，所以……所以……還是放棄了……

Final Round

終於又退回到了常規的無襯線體，網站經過幾輪調整後變成目前的樣子了，主色調在斟酌之後使用了原先那個更跳的紅色：

最後嘗試到這兒，頗有種繞了一圈回到原點的感覺，放棄了 web font、放棄了宋體字之後回歸了普(wu)通(liao)的黑體，為了讓這兩行中英混排的字粗細盡量保持一致，所以就沒有使用默認字體（不進行 font-family 指定的話在新的 Mac OS X 里就是西文部分 San Francisco，中文部分蘋方），而是在網頁和我們放到第三方平台上的 logo 一樣統一使用了蘋方的西文部分，如果沒更新到最新的 OS X 那就 fallback 到 Myriad Pro 和 Hiragino 的組合。

.tagline{n font-family: PingFang SC, Myriad Pro, Hiragino Sans GB, Microsoft Yahei, 微軟雅黑, sans-serif;n}n

所以這確實是一個為了兼容性而妥協的 bug，在那個聽眾提醒之後我對除了大標題以外的其他正文部分的字體做了修改：

body{n font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft Yahei, 微軟雅黑, sans-serif;n}n

寫到這兒發現不但說起來累，碼字碼起來也很累……真希望如《字談字暢》某期播客里說的，中文網頁世界能早日有個全平台覆蓋的襯線體可用的方案（原生的）！嗯，我依然沒死心。

更新：@梁海和 @江疆提醒了我幾個錯誤：把「PingFang SC」寫成了「Pingfang SC」、把「Microsoft YaHei」寫成了「Microsoft Yahei」，這兩個錯誤雖然對 CSS 調用沒有影響，但我一直以來都忽略了他們中的大小寫，然後梁海也提到「微軟雅黑」和「Microsoft Yahei」在現今的環境下是重複了，所以剛剛誕生了 Final-2 Round：

body{n font-family: -apple-system, BlinkMacSystemFont, Microsoft YaHei, sans-serif;n}nn.tagline{n font-family: PingFang SC, Myriad Pro, Hiragino Sans GB, Microsoft YaHei, sans-serif;n}n

推薦閱讀：