如何优雅的在vue3中不影响渲染导入字体

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

相关推荐
excel1 分钟前
webpack 核心编译器 七 节
前端
一只月月鸟呀9 分钟前
HTML中数字和字母不换行显示
前端·html·css3
天下代码客29 分钟前
【八股】介绍Promise(ES6引入)
前端·ecmascript·es6
lb291742 分钟前
CSS 3D变换,transform:translateZ()
前端·css·3d
啊阿狸不会拉杆1 小时前
第二十二章:Python-NLTK库:自然语言处理
前端·python·自然语言处理
萧寂1731 小时前
html实现手势密码
前端·css·html
excel1 小时前
webpack 核心编译器 八 节
前端
JoyZ1 小时前
AI的时代学习还有意义吗?
前端
好_快1 小时前
Lodash源码阅读-getSymbolsIn
前端·javascript·源码阅读