优化字体包速度
- 压缩字体文件(使用gzip或者其他工具)
- 懒加载字体
- 使用preload预加载字体文件，
<link rel=preload> - 使用prefetch预加载字体文件
<link rel="prefetch"> - 做字体缓存。
css加载字体文件 在assets文件夹下面，创建一个名字为Myfont的字体
然后使用
懒加载
使用自定义字体，可以通过异步加载字体文件，以延迟下载时间。可以使用 Web Font Loader 或直接在样式表中使用 @font-face 并设置 font-display: swap; 。
swap属性: 用于控制网页字体加载的表现方式，它是@font-face规则中的一个可选属性。这个属性主要是为了解决文本在自定义字体（如Web字体）加载期间的显示问题，确保用户在等待字体加载时能尽快看到文本内容，从而提升用户体验。
预加载
rel = “preload” 指示浏览器尽快开始获取资源，as = “font” 告诉浏览器这是一种字体，因此它优先处理请求，crossorigin="anonymous"，因为如果没有这个属性，预加载的字体会被浏览器丢弃。
<link rel="preload" as="font" href="./fonts/Roboto/Roboto-Regular.woff2" type="font/woff2" crossorigin="anonymous">
缓存
服务器设置Cache-Control
