移动端h5不支持font-family里面的楷体、微软雅黑等字体

移动端各种系统有各自的字体：

移动端不支持pc端的各种字体。

ios 系统

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

无微软雅黑字体

android 系统

默认中文字体是Droidsansfallback

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

无微软雅黑字体

解决办法

第一步

• 下载文字包：ttf文件

第二步

• 下载字体，转换成base64格式
• 转换链接：www.giftofspeed.com/base64-enco…

第三步

• 选择需要转换的ttf字体文件

第四步

• 创建存放base64的css文件

• 

• 复制TTF FONTS的内容到新建的family.css文件夹中

• @font-face {
      font-family:'yourfontname';
      src: url(data:application/font-ttf;charset=utf-8;base64,YOUR BASE64 STRING HERE) format('truetype');
  }
  

• 说明：

  • font-family:'yourfontname';中的yourfontname为你定义的文字名字
  • 将转换过来的base64编码 替换YOUR BASE64 STRING HERE

• 多个字体文件都可以写在一个css文件中，格式如下

• @font-face{....}
  @font-face{....}
  

第五步

• 在App.vue中引入

• @import './font/family.css';
  

第六步

• 给想要改变的字体的文字使用

  .font {
      font-famile:"你定义的名字（此处是前面提到的yourfontname）";
  }