在 Nuxt 中高效加载 Google 字体的最佳方式
当使用需要来自同一 Google 字体的不同字体粗细的多个组件时,它是避免在 Layout.vue 中导入多个链接的冗余做法很重要。
为了解决这个问题并优化 NuxtJS 项目中的字体加载,建议使用 @nuxtjs/google-fonts 模块。该模块提供了一种高效且集中的方法来管理 Google 字体导入。
使用 @nuxtjs/google-fonts 模块
npm install @nuxtjs/google-fonts
export default { buildModules: [ [ '@nuxtjs/google-fonts', { families: { 'Saira Semi Condensed': { wght: [600, 800], }, }, display: 'swap', // Load fonts as soon as possible prefetch: false, // Don't prefetch fonts preconnect: false, // Don't preconnect to font server preload: false, // Don't preload fonts download: true, // Download fonts for offline use base64: false, // Don't base64 encode fonts }, ], ], }
@font-face { font-family: 'Saira Semi Condensed', sans-serif; font-weight: 600; font-style: normal; src: local('Saira Semi Condensed'), local('SairaSemiCondensed-Wght600'), url("https://fonts.gstatic.com/s/sairasemicondensed/v15/E6qS90ZBdhyxr0K917oteYGc.woff2") format('woff2'); }
附加说明:
以上是如何在 Nuxt.js 中高效加载 Google 字体?的详细内容。更多信息请关注PHP中文网其他相关文章!