vue H5移动端引入字体文件初始化渲染卡顿

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.html

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

特别注意所有需要用到的字都要在html里罗列出来