试图提高我的谷歌分数,谷歌告诉我对我使用的两种自定义字体使用预加载来节省高达 4.5 秒的时间?当前字体存储在 Assets /字体中,然后在 typography.scss 文件中作为 @font-face 加载,然后加载到 css 内的 nuxt.config.js 文件中:[ '@/assets/scss/typography.scss' , ]
最佳答案
所以我猜你是在问如何预加载字体?有一种方法可以在 nuxt.config.js 中调用渲染函数,它会预加载字体、脚本和样式,然后让它们在客户端可用,这样你就不必在 scss 文件中加载字体,只需设置它.试试这个:
//nuxt.config.js
module.exports = {
mode: ' your mode ',
...
render: {
bundleRenderer: {
shouldPreload: (file, type) => {
return ['script', 'style', 'font'].includes(type)
}
}
},
...
}
您还应该将字体存储在静态文件夹中。 /static/fonts/yourfonts.woff2
关于javascript - nuxt.js - 预加载 .woff 字体加载为 @font-face,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54083703/