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

相关推荐
kidding7239 分钟前
微信小程序怎么分包步骤(包括怎么主包跳转到分包)
前端·微信小程序·前端开发·分包·wx.navigateto·subpackages
微学AI23 分钟前
详细介绍:MCP(大模型上下文协议)的架构与组件,以及MCP的开发实践
前端·人工智能·深度学习·架构·llm·mcp
liangshanbo12151 小时前
CSS 包含块
前端·css
Mitchell_C1 小时前
语义化 HTML (Semantic HTML)
前端·html
倒霉男孩1 小时前
CSS文本属性
前端·css
晚风3081 小时前
前端
前端
JiangJiang1 小时前
🚀 Vue 人如何玩转 React 自定义 Hook?从 Mixins 到 Hook 的华丽转身
前端·react.js·面试
鱼樱前端1 小时前
让人头痛的原型和原型链知识
前端·javascript
用户19727304821961 小时前
传说中的开发增效神器-Trae,让我在开发智能旅拍小程序节省40%时间
前端
lianghj1 小时前
前端高手必备:深度解析高频场景解决方案与性能优化实战
前端·javascript·面试