html适应不同客户端字体的解决方案

1：由于不同平台所使用的字体不同 所以仅仅使用 css: font-family 会导致不同客户端展示不出设置的字体

2：下载到需要的字体 TTF 文件(常见的TTF文件在 C：windows/Fonts 文件夹下);

一般情况下中文字体文件比较大。10M左右。

3：使用CSS中的 @font-face {

   font-family: fangsongyqs;   //为自定义的字体名称

   font-weight: bold;    

   src: url("./simkai.ttf");      //字体文件路径

 }

 

页面样式直接引用  font-family: fangsongyqs;

 

4：正常来说前三部是大体流程，但是由于前端加载10M文件会特别大。导致页面加载有问题。这里需要,筛选字体文件中当前页面用到的中文字体。生成新的字体文件TTF。

这里使用的NPM的font-spider   

[1]先下载  npm install font-spider

[2]到项目目录文件下。执行  font-spider  demo.html

[3]copy出的压缩后的字体文件  就会变得特别小

 

 

优势：适应不同平台的字体文件

劣势：修改静态页面中文需要重新生成压缩后的字体文件 比较麻烦