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

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

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

老掉牙的东西

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

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

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 Sans

Droid Sans Fallback

Arial

无宋体、无微软雅黑

Android 4.0及以上

Roboto

Roboto

Arial

无宋体、无微软雅黑

iOS

Helvetica Neue

Heiti SC (黑体)

Tahoma(v7.0)、Arial、Verdana、Georgia

STHeiti(v7.0)、无宋体、无微软雅黑

Mac OS X 10.6以下

Helvetica Neue

STHeiti (华文黑体)

Tahoma、Arial、Verdana、Georgia

宋体、无微软雅黑

Mac OS X 10.6及以上

Helvetica Neue

Hiragino Sans GB  (冬青黑体简体中文)

Tahoma、Arial、Verdana、Georgia

宋体、无微软雅黑

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

五大类字体

安卓4.0

IOS6.0

WP8

sans-serif(无衬线)

支持

支持

支持

serif(衬线)

支持

支持

支持

monospace(等宽)

支持

支持

支持

fantasy(梦幻)

不支持

支持

不支持

cuisive(草体)

不支持

不支持

不支持

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

五大类字体

IE系列

Chrome

Firefox

sans-serif(无衬线)

支持

不支持

不支持

serif(衬线)

支持

支持

支持

monospace(等宽)

支持

支持

支持

fantasy(梦幻)

支持

支持

支持

cuisive(草体)

不支持

不支持

不支持

上结论

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

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

/*微软雅黑*/ .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}

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

/*移动端项目*/ 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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

.NET Core 2.0 正式发布信息汇总

万众瞩目的.NET Core 2.0终于发布了,原定于9.19的dotnetconf大会的发布时间大大提前了1个月,.NET Core 2.0/.NET Sta...

21390
来自专栏张善友的专栏

Mono 2.2 发布了

Mono 2.2 推出新的代码生成引擎,会产生更优质的代码.对 Windows Form 以及其它内容做进一步改进 MONO 2.2 新特性: JIT N...

20570
来自专栏ACM小冰成长之路

51Nod-1995-三子棋

ACM模版 描述 ? 题解 仔细读题,运行代码出奇迹~~~这种题不该出现在 51Nod51Nod 题库的,尤其不该出现在基础题里。 代码 #include <i...

22080
来自专栏c#开发者

黑苹果安装日记

Haswell Early Reboot I removed 1 memory stick, and disable some CPU configuratio...

457160
来自专栏张善友的专栏

.NET Core 2.0 正式发布信息汇总

20130
来自专栏张善友的专栏

微软开源Erik Meijer团队开发的异步编程库Rx(Reactive Extensions)

2012年11月6日,微软开源异步编程Rx(Reactive Extensions)库。Rx是一个模型,允许开发者把所有的异步数据粘和在一起。它的源代码现在基于...

22680
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

41580
来自专栏张善友的专栏

使用 nRoute 框架来实现基于 Silverlight 的桌面应用

nRoute Framework 是 codeplex 中的一个开源项目,你可以使用 nRoute 实现基于 Silverlight/ WPF 的类似桌面应用的...

20790
来自专栏张善友的专栏

HELP! I’m an Object Factory!

It has been a week since my last post, I’ve been coding on ePortal WYSIWYG ASP.N...

21150
来自专栏流媒体人生

SetTimer在无窗口和有窗口线程的使用

 今天犯了一个粗心的错误,在无窗口线程中,SetTimer中设置计时器ID,而WM_TIMER消息响应函数中得到的计时器ID却不是之前设置的计时器ID.

9220

扫码关注云+社区

领取腾讯云代金券