Demon

你就是个倔宝宝!

笔记

中文环境下中文排版的font-family 字体选择

已有 690 次阅读2016-08-10 15:12 |系统分类:HTML/CSS |

在开发Mindia 主题的时候,为了弄出相对好看的中文排版,特意补习了下中文排版的font-family 字体选择的相关资料。以下就从自己的角度说下自己的不算得上是收获的收获吧。

众所周知,由于Windows 与其他平台(Mac、Linux)的不通用性,字体渲染等问题导致在面对中文用户的时候不得不多重考虑;加之中文字体相对于英文字体目前仍然无法采用webfont形式的劣势以及目前移动设备的盛行,使得我们在大呼坑爹的同时不得不忍受并适应之。但什么样的环境就有不同的适应法则,对于小小的font-family 字体,极力用好当前资源才是王道,并在其他方面提高用户体验的不足。

老掉牙的东西

在进入正文之前,一些font-family 的旧知识(规则)还是要复习下几点,比如说:

1、中文字体有英文的名称,但建议是中英文名称都写上。比如说微软雅黑英文名为“Microsoft YaHei”,实际时候只写英文名称即可,但保险之策是中英文名称也写上,如:

1
font-family: Arial, "Microsoft YaHei", "微软雅黑", sans-serif;

2、写font-family 时候英文字体要写在中文字体前面。这个应该是知道的了,但鄙人认为,如果面对的是Windows用户为主的话,其实微软雅黑也可以直接写在前头,因为微软雅黑本身有相应的英文字符。

3、向下兼容,优雅降级

这个就熟悉的Windows来说吧,现在主流应该是Windows7 ,但还有不少用户用着宋体为主流的Windows xp,那么考虑到这点,SimSun, “宋体” 还是有必要的。

各平台的主流字体支持情况

各系统的默认字体和常用字体:

系统默认西文字体默认中文字体其他常用西文字体其他常用中文字体
Windows宋体宋体Tahoma、Arial、Verdana、Georgia微软雅黑、黑体
Android 4.0以下Droid SansDroid Sans FallbackArial无宋体、无微软雅黑
Android 4.0及以上RobotoRobotoArial无宋体、无微软雅黑
iOSHelvetica NeueHeiti SC (黑体)Tahoma(v7.0)、Arial、Verdana、GeorgiaSTHeiti(v7.0)、无宋体、无微软雅黑
Mac OS X 10.6以下Helvetica NeueSTHeiti (华文黑体)Tahoma、Arial、Verdana、Georgia宋体、无微软雅黑
Mac OS X 10.6及以上Helvetica NeueHiragino Sans GB  (冬青黑体简体中文)Tahoma、Arial、Verdana、Georgia宋体、无微软雅黑

各移动设备系统支持情况:

五大类字体安卓4.0IOS6.0WP8
sans-serif(无衬线)支持支持支持
serif(衬线)支持支持支持
monospace(等宽)支持支持支持
fantasy(梦幻)不支持支持不支持
cuisive(草体)不支持不支持不支持

当然目前这只是移动设备各系统的支持情况,然而pc端个浏览器的支持情况也各不相同,如:

五大类字体IE系列ChromeFirefox
sans-serif(无衬线)支持不支持不支持
serif(衬线)支持支持支持
monospace(等宽)支持支持支持
fantasy(梦幻)支持支持支持
cuisive(草体)不支持不支持不支持

上结论

废话就不做分析了,结合参考资料,给出我目前在用的font-family 代码吧,不一定最好,欢迎赐教。

下面非全局定义,而是针对特殊div 下的个性化定义:

1
2
3
4
5
6
7
8
/*微软雅黑*/.yahei{font-family: 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif!important}/*宋体*/.songti{font-family: "Helvetica Neue", Helvetica,"Songti SC", "SimSun", serif!important}/*楷体*/.kaiti{font-family: "Helvetica Neue", Helvetica, "KaiTi", "楷体", "STKaiti", "华文楷体", serif!important}/*华文仿宋*/.fangsong{font-family: "Times New Roman", "Helvetica Neue", Helvetica, "FangSong", "仿宋", "STFangSong", "华文仿宋", serif!important}

如果是用于全局项目中,那么可能会有所不同,这里直接引用参考资料的代码:

1
2
3
4
5
6
/*移动端项目*/font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;/*pc端(含Mac)项目*/font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;/*移动和pc端项目*/font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;

当然,如何排布font-family 根本是看需求是什么,这个仅仅是作为参考。

参考资料:

https://ruby-china.org/topics/14005

http://ued.ctrip.com/blog/?p=3589

http://typo.sofi.sh/

http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html

http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/


标签: 中文环境下中文排版的font-family 字体选择 举报

收藏 1人收藏
给个赞1人点赞

笔记作者:Demon

笔记链接:

原创声明:此笔记被 Demon 标注为原创笔记,未经作者同意转载必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

评论
0 /300