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可以实现字体的永久缓存或临时缓存。通过合理配置,可以提高网页加载速度和性能,同时给予设计师更大的字体选择权。