移動端字體問題

默認字體

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 可是下面的這種狀況不兼容IE七、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;
 }
複製代碼