移动端引入字体文件渲染卡顿

1.安装 font-spider

npm i font-spider

2. 在src/font 文件夹下新建 index.html、font.css文件

2.1 font.css

@font-face {
  font-family: 'YouSheBiaoTiHei';
  src: url("./YouSheBiaoTiHei.ttf") format("truetype"); 
}

2.2 index.html

<link rel="stylesheet" type="text/css" href="./font.css"></link>
....
<div style="font-family:YouSheBiaoTiHei">必须把所有用到特殊字体的字都在这里写一下  这是我要用的字</div>

3.vue组件中使用

<template>
<div style="font-family:YouSheBiaoTiHei">这是我要用的字</div>
</template>
<style src="@/font/font.css" scoped>
</style>

4.压缩文件

在src/font文件夹下运行

font-spider index.htm

可以看到font下的原来的YouSheBiaoTiHei.ttf被按需压缩了， 源文件被存放在了font/.font-spider 下

特别注意所有需要用到的字都要在html里罗列出来
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容