兼容PC手机端字体

2022-10-28 18:58:52

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

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

系统	默认西文字体	默认中文字体	其他常用西文字体	其他常用中文字体
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/

转载 http://devework.com/font-family-chinese.html

码农公寓

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

上结论

相关文章