目前已經(jīng)錄完的 Anyway.FM 第 12 期里痪蝇，討論了一個聽眾反饋的問題：「Anyway.FM 官網(wǎng)的 font-family 首選了 PingFang SC抖格，而不是系統(tǒng)默認英文字體，應該是個 bug」住册，然后我發(fā)現(xiàn)用純語言討論這事情非常蛋疼婶博，口都說干了，Leon 也被我說睡著了界弧，但似乎還木有說清楚，所以特別記錄一下這個 bug 的誕生過程搭综，以及在 Anyway.FM 網(wǎng)站設計上線時的完整糾結過程垢箕。
先確定一下主要的場景，因為網(wǎng)站上線前我也不知道詳細數(shù)據(jù)兑巾，只能假想聽眾和我自己的博客比較重合条获，數(shù)據(jù)大概差不多。事實上后來的實際數(shù)據(jù)顯示 Anyway.FM 的網(wǎng)站用戶使用現(xiàn)代瀏覽器的比例更高一些蒋歌，Mac 平臺的比例也高不少帅掘，UV 大致情況如下：
Round 1
根據(jù)上面這些大致的數(shù)據(jù)委煤，基本上從一開始就是本著「優(yōu)雅降級」的策略先考慮 Mac 平臺的效果，然后再兼顧 Windows 和移動端修档。策劃節(jié)目前幾期的時候我就設計了網(wǎng)站第一個草稿碧绞，好吧，說是設計其實從頭到尾也都沒有打過啥設計稿吱窝，直接碼了個靜態(tài)頁面讥邻。標題字體選用的是兩個 web font，西文部分是?Merriweather院峡，中文部分是鄰國日本的?TypeSquare?的?漢儀粗宋兴使，大致效果如下，線上 Demo?在此照激，不過 Merriweather 尚未加載发魄，只是 CSS 里指定了一下。
之前也提到過森澤的?TypeSquare?云字體服務俩垃，雖然支持的簡體字數(shù)量不多（十幾個励幼，不算各種粗細大概只有幾個家族），但質量都不錯吆寨、配置方便而且筆畫都是遵守大陸習慣的（這點比起來自寶島的云字體服務?justfont?提供的字體要好）赏淌，當然因為服務器不在國內速度不夠理想。另外注冊也是個問題啄清，因為網(wǎng)頁僅支持日文六水，所以依稀記得我當初是開著翻譯軟件研究了半天日本假地址和各種專業(yè)術語才終于能上手使用了 ㄟ( ▔, ▔ )ㄏ
西文部分的這個?Merriweather?一直是我挺喜歡的可以在 Google Fonts 里調用的 web font，跟漢儀粗宋一樣有不少筆畫粗細的變化而且也有字重差不多的配合辣卒，所以就這么搭配了掷贾，從視覺效果上來說這樣的 web font 組合肯定能做到比較好，畢竟在移動端也是支持的荣茫，在 iOS 端網(wǎng)頁上應用宋體也是可以實現(xiàn)的了想帅。
Round 2
以上面那個稿子做主基調我開始細化網(wǎng)頁，然后在填充內容的時候我想到用打字機的效果來逐步展現(xiàn)我們的 slogan啡莉，用比較親民+調侃的風格帶出我們節(jié)目的特性和關鍵內容港准，這個打字機效果也有朋友問過，用的是在 t.js咧欣，代碼在 GitHub 上有：https://github.com/mntn-dev/t.js
執(zhí)著地確定了這個效果之后誕生了一個問題浅缸，假如在某些情況下兩個 web font 加載比較慢，隔了幾秒才顯示的話打字效果就打折扣了魄咕，可能等后臺字都顯示完整句了字體才加載出來衩椒，所以只能忍痛割愛拋棄了用 web font 的念頭。然后那會兒也和 Leon 分頭開始認真設計 Anyway.FM 的 Logo，我自己出的第一個比較滿意的方案是下圖里那個波形毛萌，用一串波峰波谷拼出「A」和「W」苟弛，同時也表現(xiàn)出我們是個聲音類的節(jié)目。然后因為用回黑體覺得缺了些個性和變化阁将，而且 Logo 本身也是偏簡單的膏秫，所以在網(wǎng)頁頭部用了深色、加了動畫冀痕，效果如下圖荔睹，Demo 在此：http://anyway.fm/misc/old/index.html
Round 3
然后在某一個風和日麗的周末，Leon 的那個觸手系 logo 誕生了言蛇！雖然我們擔心這個 logo 會略復雜僻他，不過觸手們散發(fā)出的非常 organic 的「散漫感」還是挺有趣的，經(jīng)過調整之后我們還是確定使用了腊尚，所以之前的網(wǎng)頁版本又打回去重來了~這第三版回到了系統(tǒng)默認字體的老路吨拗，我嘗試搭配了 Palatino 和 Mac 自帶的 Songti SC（華文宋體），你看我對襯線字體是多么執(zhí)著……配色上改用了熒光筆的黃色婿斥，想做出手涂關鍵詞的感覺劝篷。
跟目前線上版本網(wǎng)頁一樣，這個 Demo?也在四周加了主題色的邊框（這個框也是個深坑民宿，想來很簡單的形式娇妓，事實上在新的 iOS Safari 上無 bug 實現(xiàn)我也是最近才搞定，辛酸也足夠再寫一篇博文了……）活鹰。當時已經(jīng)開始嘗試這種四周邊框風格的節(jié)目封面哈恰，所以希望能跟網(wǎng)站有一定的聯(lián)系，不過也是因為在同步嘗試封面志群，所以意識到標題字體使用 Palatino + 華文宋體的統(tǒng)一性問題着绷，除了移動端和桌面端沒法統(tǒng)一之外，與第三方平臺上出現(xiàn)的我們節(jié)目的 logo 也沒法統(tǒng)一锌云，所以……所以……還是放棄了……
Final Round
終于又退回到了常規(guī)的無襯線體荠医，網(wǎng)站經(jīng)過幾輪調整后變成目前的樣子了，主色調在斟酌之后使用了原先那個更跳的紅色：
最后嘗試到這兒桑涎，頗有種繞了一圈回到原點的感覺彬向，放棄了 web font、放棄了宋體字之后回歸了普(wu)通(liao)的黑體攻冷，為了讓這兩行中英混排的字粗細盡量保持一致娃胆，所以就沒有使用默認字體（不進行 font-family 指定的話在新的 Mac OS X 里就是西文部分 San Francisco，中文部分蘋方）讲衫，而是在網(wǎng)頁和我們放到第三方平臺上的 logo 一樣統(tǒng)一使用了蘋方的西文部分缕棵，如果沒更新到最新的 OS X 那就 fallback 到 Myriad Pro 和 Hiragino 的組合。
.tagline{
font-family:'PingFang SC', 'Myriad Pro', 'Hiragino Sans GB', 'Microsoft Yahei', '微軟雅黑', sans-serif;
}
所以這確實是一個為了兼容性而妥協(xié)的 bug涉兽，在那個聽眾提醒之后我對除了大標題以外的其他正文部分的字體做了修改：
body{
font-family:-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', '微軟雅黑', sans-serif;
}
寫到這兒發(fā)現(xiàn)不但說起來累招驴，碼字碼起來也很累……真希望如《字談字暢》某期播客里說的，中文網(wǎng)頁世界能早日有個全平臺覆蓋的襯線體可用的方案（原生的）枷畏！嗯别厘，我依然沒死心。
更新：@梁海和 @jjgod?提醒了我?guī)讉€錯誤：把「PingFang SC」寫成了「Pingfang SC」拥诡、把「Microsoft YaHei」寫成了「「Microsoft Yahei」」触趴，這兩個錯誤雖然對 CSS 調用沒有影響，但我一直以來都忽略了他們中的大小寫渴肉，然后 @梁海也提到「微軟雅黑」和「Microsoft YaHei」在現(xiàn)今的環(huán)境下是重復了冗懦，所以剛剛誕生了 Final-2 Round：
body{font-family:-apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;}
.tagline{font-family:'PingFang SC', 'Myriad Pro', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;}
