1.使用 webfontloader.js

Web Font Loader是一个JavaScript库，用于控制在网页中加载和使用自定义字体。它为网页设计师和开发人员提供了更大的灵活性，可以使用各种字体来装饰网页。对于Web Font Loader是否缓存字体，答案是取决于加载器的配置。Web Font Loader提供了一些配置选项，可以控制字体的缓存行为。

js 复制代码

通过npm 安装webfontloader
npm install webfontloader

2.使用

2.1 在style中

style 复制代码

@font-face {
    font-family: shfnbk;
    src: url(''); // 填写链接
}
@font-face {
    font-family: aliD;
    src: url(''); // 填写链接
}
@font-face {
    font-family: aliH;
    src: url(''); // 填写链接
}

2.2 在js中

js 复制代码

import { onMounted } from 'vue';
onMounted(() => {
    //...提示字体加载中..
    isload.value = true;
    WebFont.load({
        custom:{ //用户自定义字体
            families:['aliD','aliH','shfnbk'],
            cacheBust: false // 是否临时储存 false将被永久缓存在浏览器中，除非用户手动清除浏览器缓存
        }
    })
    
})

3.总结

Web Font Loader是一种强大的工具，用于加载和使用自定义字体。它提供了灵活的配置选项，可以控制字体的缓存行为。根据具体的配置，Web Font Loader可以实现字体的永久缓存或临时缓存。通过合理配置，可以提高网页加载速度和性能，同时给予设计师更大的字体选择权。