中文网页如何选择字体

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

2016.4.29 2

一、兼容性

1、windows/OSX 2、IE 8 及以上/Chrome/Safari/360/猎豹/QQ/Firefox/Opera 等... 3、Retina Display

二、锯齿是个大问题

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

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

三、选择一个合适的英文字体

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

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

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

四、前后顺序

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。

五、细节也要注意

-webkit-font-smoothing: antialiased;

参考:-webkit-font-smoothing

六、规范

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

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

推荐一篇文章:Typo.css - 中文网页重设与排版

LEAVE A REPLY
loading
正在赶回来……