我发誓我TM再信那些设计网站上的狗屁‘高级感’案例我就是狗！你知道我看到网站后台那条从日均1万UV直接掉到3000多的流量曲线时，脑子里是什么吗？是空白。然后就是想把当时喝醉了在CSS文件里敲下 font-family: 'STXingkai', 'Microsoft YaHei' 那行代码的手给剁了！用户体验？页面兼容性？那会儿我眼里只有‘诗情画意’，现在好了，所有用苹果手机和某些安卓机的用户打开我的站，看到的是一堆惨不忍睹的宋体甚至系统默认字体替代，排版错乱得亲妈都不认识，你能想象一个讲IT教程的网站首页标题是那种软绵绵的毛笔字吗？我当时真是脑子进水了。
抽了三根烟才冷静下来，开始翻Google Analytics和服务器日志。全是404？不是。被K了？也没有。但跳出率直接干到90%以上！我盯着那些用户行为路径报告，大部分人停留时间不超过5秒。那一刻我才真的破防了，这就叫不作死就不会死。
血的教训，关于网页字体，这几个坑谁踩谁知道：
1. 千万别用冷门字体，尤其是中文字体！ 你以为你电脑上有‘方正某某体’，用户电脑上就有？天真！浏览器找不到你指定的字体，就会用你列表里下一个，或者直接用系统默认的。结果就是，你精心设计的‘高级感’在90%的用户那里变成了‘廉价感’甚至‘乱码感’。（这里有篇关于Web字体加载优化的保命指南，看完保你少掉一半头发）
2. ‘字体栈’（Font Stack）的顺序就是救命稻草！ 正确写法应该是 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; 看见没？把系统通用字体放前面，最后用 sans-serif 或 serif 这种通用字体族兜底。这才是保证页面在任何设备上都能有个基本体面样子的核心，比你写一万行花里胡哨的CSS动画都重要！
3. 如果你非要搞个性，用WebFont（比如Google Fonts），求求你考虑一下加载速度！ 别动不动引入一整套字重（什么Light、Regular、Medium、Bold全弄上），每个都是一个HTTP请求，都意味着用户要多等零点几秒。尤其是移动端，网速慢的时候，文字区域先是一片空白（FOUT/FOIT），然后‘唰’一下出来，这种体验简直就是在赶用户走。先把系统自带字体玩明白，再考虑这些花活儿。
现在我把字体改回了一套安全的字体栈，流量花了快一个月才慢慢爬回来一点。这教训太深刻了，网站建设，尤其是前端，稳定和兼容性永远是爹，审美和个性你得往后稍稍。不然你以为你的站在‘乘风破浪’，其实在用户眼里，早他娘的就‘搁浅触礁’了。唉，不说了，我去看看今天又掉了几个IP。
