首页 > 新锐资讯动态

中文网页如何选择字体

发布时间:2017-02-06 发布者:新锐传媒 查阅 [871] 评论 [0]

前端需要考虑性能的同时还原设计(字体),如果 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

 

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


发自 [] | 评论 [0] | 查阅 [871]

网友点评:0 条评论

      免责声明 | 新锐观点 | 网站运营 | 网站推广 | 联系我们 | 网站地图