中文网页最优字体选择

wordpress 2018-05-18 495 次浏览 6 条评论

汲取了各方对中文中文网页字体选择的理解和实践,进行了总结性表述。其中掺杂了不少个人主观意见和想法,如有不妥望轻喷,更希望能得到您的宝贵意见。文中提供的方案并非绝对正确的中文网页字体选择方案,而是希望获得一个相对最佳的折中妥协方案,以满足浏览器的过度兼容性需求。

网页前端需要考虑各方面的兼容性:

使用设备:PC,Tablet,Mobile 等

操作系统:Windows,Mac OS,IOS,Android 等

显示屏幕:Retina 等

浏览器:IE,Chrome,Firefox 及一众国产浏览器等

锯齿问题

字体大小建议使用 12px —— 16px。

英文字体

中文优先的页面中,英文字体的原则是不要太出众,过于抢风头。其中:

lucida —— 比较圆滑

hevetica —— 比较瘦

menlo —— 适合代码

同时,字体顺序上,先渲染英文字体,后渲染中文字体,防止优先渲染包含在中文字体中的默认英文字体。

-webkit-font-smoothing

中文页面建议使用:

-webkit-font-smoothing: antialiased;

-webkit-font-smoothing 全部可选值实际展示效果:https://labs.qianduan.net/macfont.html

字体名字

中文字体都是有中文和英文两个名字的,建议均使用。因为在非中文系统中,也可能希望显示中文的文字。

关于微软雅黑

基于各类文章所述,最不得罪微软、也最不得最果粉的解决方案就是“使用微软雅黑,但放在 Mac 支持的中文字体之后”。

具体实践

如果选择无衬线字体,那么我的个人使用为:

font-family: "San Francisco","Lucida Grande","Lucida Sans Unicode","helvetica neue",Verdana,tahoma,Aril,PingFangSC-Light,"hiragino sans gb",STXihei,"华文细黑","WenQuanYi Micro Hei","Microsoft YaHei UI","Microsoft YaHei","微软雅黑",Heiti,"黑体",sans-serif;

顺序理由:

San Francisco —— Mac 英文,官方新品,没毛病

Lucida Grande —— Lucida 系列,Mac 英文

Lucida Sans Unicode —— Lucida 系列,Windows 英文

helvetica neue —— Windows 英文

Verdana —— Windows 英文

tahoma —— Windows 英文

Aril —— 默认无衬线英文

PingFangSC-Light —— 苹方-简细体,Mac 中文

hiragino sans gb —— 苹果丽黑(冬青黑体),Mac 中文,有些文字书写不符合大陆写法

STXihei —— 华文细黑,Mac/Windows 中文

WenQuanYi Micro Hei —— 文泉驿微米黑,Linux 开源中文

Microsoft YaHei UI —— Microsoft YaHei 系列,微软雅黑,Windows 中文,Windows 8.1 推出

Microsoft YaHei —— Microsoft YaHei 系列,微软雅黑,Windows 中文

Heiti —— 黑体,Windows 中文

sans-serif —— 无衬线字体

推荐阅读

Chinese Standard Web Fonts: A Guide to CSS Font Family Declarations for Web Design in Simplified Chinese

上天工具

字蛛(中文字体压缩器)

Fonts.css -- 跨平台中文字体解决方案

转载:http://devops-club.com/article/font-choice-for-chinese-website

只有绵羊会向狮子要求平等,而狮子们从来不会这样想。

6 条评论

  1. 有的时候觉得,一文大量文字的时候,宋体也挺好看的

    • 论文的要求都是宋体,打印出来挺好的,但宋体说实话真要放到博客上,我感觉不好看

    • 在不同的设备显示效果不太一样,仔细看能看出来点

    • 微软雅黑是最平衡的字体

发表评论

电子邮件地址不会被公开。 必填项已用*标注

+ 24 = 31