移动端字体问题

默认字体

ios 系统

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

android 系统

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

winphone 系统

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

较好的字体设置

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
复制代码

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

无衬线字体和衬线字体

Google在2015年9月发布的新Logo下，采用了无衬线字体。

因为无衬线体字的字体结构简单，在同等字号下，无衬线字体看上去比有衬线字体更大、结构也更清晰，所以电子设备的屏幕上也偏好无衬线字体。

最小字体限制

• iphone类移动设备不受最小字号限制
• 其他移动设备可能受8px限制
• chrome中限制最小12px

chrome最小限制12px的解决办法

利用css3的缩放，最后结果12 * 0.9=10.8px 但是下面的这种情况不兼容IE7、IE8

.small-font{
    font-size: 12px;
    -webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.90);
}
复制代码

所以加上下面的代码:同时给dom加上下面的两个css即可。

.small-font{    
   font-size:12px; 
    -webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.90);
}

.smallsize-font {
   font-size:10.8px;
 }
复制代码