作者：崔正

链接：https://zhuanlan.zhihu.com/p/19861892

来源：知乎

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

前端需要考虑性能的同时还原设计（字体），如果 100% 还原那就只能用图片了。如果考虑页面兼容性和性能，需要做一定的妥协。（设计师体谅体谅前端吧）

1. 兼容性

windows/OSX

IE 8 及以上/Chrome/Safari/360/猎豹/QQ/Firefox/Opera 等...

Retina Display

2. 锯齿是个大问题

html 仅表达 12-16px 的字体，windows 渲染 12-16px 锯齿最小，看起来很整齐的样子。16px 以上锯齿大到没朋友，所以 16px 以上的字都用图片表达。

web 上反对使用「微软雅黑」，字与字之间的间距过小使阅读起来极其困难，这尼玛不能忍啊。之前合作过的设计师酷爱微软雅黑，但 web 上渲染出来跟 Photoshop 上的完全没法比。

windows 下「宋体」其实没那么丑。

3. 选择一个合适的英文字体

英文字体数不过来的多，有瘦的、胖的、圆的、锐利的等... 在合适的场合用合适的字体就好。

如果你希望英文不要抢风头，比较瘦的 hevetica 系列比较合适。如果你希望圆滑清晰一点 lucida 系列比较合适。如果是演示代码，menlo 等字体也很清晰。

选择的英文字体合适还是不合适，现场是检验设计的唯一标准。把字体写进页面里，看看效果好不好，是不是对齐、漂亮、兼容性好，喜欢就好。

4. 前后顺序

font-family: "Lucida Grande", Lucida Sans Unicode, Hiragino Sans GB, WenQuanYi Micro Hei, Verdana, Aril, sans-serif;

font-family 先写英文后写中文，这样先渲染英文的英文，后渲染中文的中文。如果先写中文，则会渲染中文的英文和中文的中文。

我把 Hiragino Sans GB 写在 verdana 之前，是为了如果 lucida 系列渲染不出来，希望在 OSX 先渲染冬青黑的英文，而不是先渲染 verdana 和 aril。

5. 细节还是要注意的啦

-webkit-font-smoothing: antialiased;

参考1：-webkit-font-smoothing

参考2：mac下网页中文字体优化前端观察

6. 有点规范也是好的

#000 #333 #666 #999 #ccc #eee

黑白色系多用一些安全色，让前端开发的时候省了很多事情，而且渲染结果也不错的啊。要说安全色不够还原设计，那只能说设计师水平不行啊。

小鱼同志写的是真心好噢：Typo.css - 中文网页重设与排版