如何在移动html5移动网站上定义font-family，

如何在移动html5移动网站上定义font-family，

使用自定义字体时，很容易像PC一样定义。其实Android和ISO系统是不支持中文字体的，所以定义后是看不到效果的，直接定义字体效果。如果需要定义，你会认为@font-face定义为微软雅黑字体，存储在web服务器上。需要使用时会自动下载

@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 */

}

问题虽然解决了，但是这样操作很消耗用户流量，也对页面打开造成了很大延迟。

我们在一起看看三大主流系统他们字体到底支持哪些呢？

ios 系统

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

无微软雅黑字体

android 系统

默认中文字体是Droidsansfallback

默认英文和数字字体是Droid Sans

无微软雅黑字体

winphone 系统

默认中文字体是Dengxian(方正等线体)

默认英文和数字字体是Segoe

无微软雅黑字体

总结：

各个手机系统有自己的默认字体，一般不支持我们常用字体，例如微软雅黑等；

如无特殊需求，手机端无需定义中文字体，使用系统默认即可。

英文字体和数字字体可使用 Helvetica ，三种系统都支持。

/* 移动端定义字体的代码 */

body{font-family:Helvetica;}