vue3 引入自定义字体文件 比如 PingFangSC

1.先下载 PingFangSC 字体文件 ttf格式，可以借助 CloudConvert 进行压缩为 woff2 文件格式（内存比 tff 小）

2.在assets中引入 PingFangSC.woff2文件
3.在assets/style  下创建 font.scss 文件

4.在font.scss文件中引入

 @font-face {
     font-family: 'PingFang SC';
      /* 的作用是在自定义字体加载之前，浏览器先使用一个备选字体来渲染文本，等到自定义字体加载完成后，再切换到自定义字体。 */
      font-display: swap; 
      src: url('../PingFangSC.woff2') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

5.在main.js全局引入

 //引入PingFang字体
 import '@/assets/style/font.css'

6.因为全局使用 所有在公共样式文件中 引入 

  body {
      font: 16px/1.5 "PingFang SC","PF", "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
        "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
      color: #333;
    }

7.字体文件太大（woff2 文件也有6mb）：没找到好的压缩方法 因为内容全是活的 不能按需加载压缩

只能先这样 异步加载字体文件了