移动端字体失效问题

1. 问题：

开发的网页是华文行楷，在电脑端显示正确，在移动端显示失效。

2. 原因

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

 

ios 系统

 

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

无微软雅黑字体

 

android 系统

 

默认中文字体是Droidsansfallback

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

无微软雅黑字体

 

winphone 系统

 

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

默认英文和数字字体是Segoe

无微软雅黑字体

 

总结：

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

3. 解决办法

 

（1）在免费网站下载“华文行楷.tff”文件

http://www.itmop.com/downinfo/126149.html

（2）将tff文件放置在项目static下

 

（3）在html增加定义，STXingkai1是自定义的字体名称，可修改

<style>

@font-face {

    font-family: 'STXingkai1';

    src: url('/asserts/my/STXingkai.ttf') /* Safari, Android, iOS */

   }

</style>

（4）在html增加STXingkai1,华文行楷。其中华文行楷适用于电脑端，STXingkai1适用于移动端。

 <p style="font-family:STXingkai1,华文行楷;font-size:150%">尊敬的whale女士，字体设置成果</p>