移动端字体问题

时间 2019-12-05

标签移动字体问题栏目无线繁體版

原文原文链接

默认字体

ios 系统

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

android 系统

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

winphone 系统css

默认中文字体是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 兼容命中系统默认中文字体黑体-简或黑体-繁android

无衬线字体和衬线字体

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

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

最小字体限制

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

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

利用css3的缩放，最后结果12 * 0.9=10.8px 可是下面的这种状况不兼容IE七、IE8web

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

因此加上下面的代码:同时给dom加上下面的两个css便可。chrome

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

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