兼容PC手机端字体

时间 2019-11-21

标签兼容手机字体繁體版

原文原文链接

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

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

系统	默认西文字体	默认中文字体	其余经常使用西文字体	其余经常使用中文字体
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	宋体、无微软雅黑

各移动设备系统支持状况：html

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

固然目前这只是移动设备各系统的支持状况，然而pc端个浏览器的支持状况也各不相同，如：web

五大类字体	IE系列	Chrome	Firefox
sans-serif（无衬线）	支持	不支持	不支持
serif（衬线）	支持	支持	支持
monospace（等宽）	支持	支持	支持
fantasy（梦幻）	支持	支持	支持
cuisive（草体）	不支持	不支持	不支持

上结论

废话就不作分析了，结合参考资料，给出我目前在用的font-family 代码吧，不必定最好，欢迎赐教。浏览器

下面非全局定义，而是针对特殊div 下的个性化定义：ruby

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

若是是用于全局项目中，那么可能会有所不一样，这里直接引用参考资料的代码：ide

/*移动端项目*/
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 根本是看需求是什么，这个仅仅是做为参考。字体

参考资料：ui

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

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

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