很多时候,我们看到设计图上使用的字体是微软雅黑,宋体等,在css里设置字体样式后,再电脑上查看时,字体没有问题,但是使用移动端访问时,字体就变了。
下面来了解下手机系统支持的字体:
Android支持字体:
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
IOS支持字体:
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
WinPhone支持字体:
默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
由上面可以看出,手机系统是不支持中文字体的。如果需要使用中文字体,需要使用 @font-face 引入字体并将其放到服务器上,在需要使用时下载。
示例:
@font-face {
font-family: 'MicrosoftYaHei';
src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */
src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('MicrosoftYaHei.woff') format('woff'), /* Modern Browsers */
url('MicrosoftYaHei.ttf') format('truetype'), /* Safari, Android, iOS */
url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */
}
|
注意:这样会消耗用户流量,并且影响页面访问速度。
个人认为,如果没有特殊需求,手机端无需定义中文字体(想想安卓手机可以随意更换字体,你设置了也没有用),使用系统默认即可。英文字体和数字字体可使用 Helvetica ,三种系统都支持。