css——移動端h5不支持font-family里面的楷體、微軟雅黑等字體

轉載自：https://blog.51cto.com/xuqin/2399513

 

我的情況

自行開發用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左右，犧牲打開速度）

　　字體到站長去下：http://font.chinaz.com/

　　引入：

<style>
@font-face { 
  font-family: STKAITI; /*這里是說明調用來的字體名字*/ 
  src: url(‘STKAITI.TTF’); /*這里是字體文件路徑*/ 
    }

    .content{  font-family: STKAITI;}
</style>
<div class="content">噠噠噠噠噠噠多多多多多，我在手機端也是現實楷體了啦啦</div>