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

相关推荐
栈老师不回家14 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙20 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠24 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds44 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果1 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长1 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js