鲁达 前端需要考虑性能的同时还原设计（字体），如果 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
黑白色系多用一些安全色，让前端开发的时候省了很多事情，而且渲染结果也不错的啊。要说安全色不够还原设计，那只能说设计师水平不行啊。