目前已经录完的 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 上有：https://github.com/mntn-dev/t.js

执着地确定了这个效果之后诞生了一个问题，假如在某些情况下两个 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{

font-family:'PingFang SC', 'Myriad Pro', 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', sans-serif;

}

所以这确实是一个为了兼容性而妥协的 bug，在那个听众提醒之后我对除了大标题以外的其他正文部分的字体做了修改：

body{

font-family:-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', sans-serif;

}

写到这儿发现不但说起来累，码字码起来也很累……真希望如《字谈字畅》某期播客里说的，中文网页世界能早日有个全平台覆盖的衬线体可用的方案（原生的）！嗯，我依然没死心。

更新：@梁海和 @jjgod 提醒了我几个错误：把「PingFang SC」写成了「Pingfang SC」、把「Microsoft YaHei」写成了「「Microsoft Yahei」」，这两个错误虽然对 CSS 调用没有影响，但我一直以来都忽略了他们中的大小写，然后 @梁海也提到「微软雅黑」和「Microsoft YaHei」在现今的环境下是重复了，所以刚刚诞生了 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;}