您的位置:首页 > 移动开发

兼容PC手机端字体

2016-07-07 10:11 274 查看

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

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

系统默认西文字体默认中文字体其他常用西文字体其他常用中文字体
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/
转载 http://devework.com/font-family-chinese.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: