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

相关推荐
Mr_Xuhhh36 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic7 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端