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

我的情况

自行开发用vue写的钉钉工作台H5页面，页面里的标题，通过css设置字体为楷体。

font-family: 'KaiTi';

本地启动项目时，通过谷歌浏览器访问是正常的，但是部署到钉钉上后没有效果

原因

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

移动端不支持pc端的各种字体。移动端各种系统有各自的字体：

ios 系统

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

无微软雅黑字体

android 系统

默认中文字体是Droidsansfallback

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

无微软雅黑字体

总结：

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

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

英文字体和数字字体可使用 Helvetica都支持。

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

body{font-family:Helvetica;}

解决方法

引入字体库。(字体库一般10M左右，牺牲打开速度)

引入：

font-family: STKAITI; /*这里是说明调用来的字体名字*/src: url(‘STKAITI.TTF’);/*这里是字体文件路径*/}

.content{ font-family: STKAITI;}

哒哒哒哒哒哒多多多多多，我在手机端也是现实楷体了啦啦