移动端字体设置

很多时候，我们看到设计图上使用的字体是微软雅黑，宋体等，在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 ，三种系统都支持。