建站代码网

热门标签

中文网页最优字体选择

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


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


使用设备: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 -- 跨平台中文字体解决方案





热门信息

X