关于移动端 web 页面字体

今天在制定符合移动端 CSS Reast 样式,涉及到页面字体的设置问题,PC 端页面字体无法就是常见的宋体、微软雅黑之类的,有特殊字体时使用 font-face 属性引用特殊字体文件即可,在移动端使用 font-face 也是可以的,但是这样一来消耗用户的流量,二来对页面的打开速度造成了延迟,得不偿失;

找了三大手机系统的字体资料:
ios 系统

  • 默认中文字体是 Heiti SC
  • 默认英文字体是 Helvetica
  • 默认数字字体是 HelveticaNeue
  • 无微软雅黑字体

android 系统

  • 默认中文字体是 Droidsansfallback
  • 默认英文和数字字体是 Droid Sans
  • 无微软雅黑字体

winphone 系统

  • 默认中文字体是 Dengxian(方正等线体)
  • 默认英文和数字字体是 Segoe
  • 无微软雅黑字体

iOS 4.0+ 使用英文字体 Helvetica Neue,之前的 iOS 版本降级使用 Helvetica。中文字体设置为华文黑体 STHeiTi。 需补充说明,华文黑体并不存在 iOS 的字体库中 (http://support.apple.com/kb/HT5878), 但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体 - 简或黑体 - 繁

Heiti SC Light 黑体-简 细体 (iOS 7后废弃)
Heiti SC Medium 黑体-简 中黑
Heiti TC Light 黑体-繁 细体
Heiti TC Medium 黑体-繁 中黑

原生 Android 下中文字体与英文字体都选择默认的无衬线字体

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans,中文字体原生 Android 会命中 Droid Sans Fallback
4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体
其他第三方 Android 系统也一致选择默认的无衬线字体

下图为测试机 iphone 4s、三星 GT-N7000 android 2.3.6、HTC windows Phone 8.0 三种手机中的默认中文字体和英文字体展现:
各平台下中英文字体对比

我们可以看出三种不同的中文字体和微软雅黑一样是无衬线字体,有无衬线只是一个小原因,而无论页面中使用哪种字体,肉眼很难看出它们的差异,对产品的体验几乎没有影响。

有关衬线字体和无衬线字体的差别,参考下图:
衬线字体和无衬线字体的差别

结论

  • 各个手机系统有自己的默认字体,且都不支持微软雅黑
  • 如无特殊需求,手机端无需定义中文字体,使用系统默认
  • 英文字体和数字字体可使用 Helvetica ,三种系统都支持
/* 移动端定义字体的代码 */
body{font-family:Helvetica;}

如果强迫症作祟,非要想设置移动端 web 页面字体的话,建议使用无衬线字体:

/* 移动端 web 页面字体 */
body{font-family:"Helvetica Neue", Helvetica,STHeiTi,sans-serif;}

附:ios7 字体列表

【推荐阅读】

发表评论
* 昵称
* Email
* 网址
* 评论