如何在 Nuxt 项目中高效加载多种粗细的 Google 字体？

在 Nuxt 中高效加载 Google 字体

您在 Nuxt 项目中对 Google 字体应用不同的字体粗细时遇到问题。问题是由于导入不同粗细的同一字体的多个字体链接而引起的，这会引入冗余。

建议：

最佳解决方案是避免使用 CDN字体加载。通过页面源自行托管或代理 Google 字体是一种更有效的方法。为了实现这一点，请考虑使用 @nuxtjs/google-fonts 模块。

模块配置：

在您的 nuxt.config.js 文件中，添加以下代码：

<code class="js">export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        subsets: ['latin'],
        display: 'swap',
      },
    ],
  ]
}</code>

此配置指定应为“Saira Semi Condensed”字体系列加载两种字体粗细（600 和 800）。

CSS 配置：

在 Layout.vue 中，导入字体系列一次：

<code class="css">@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed');</code>

确保您还添加 CSS 规则以在相应组件中应用特定字体粗细：

ComponentA.vue:

<code class="css">footer {
  font-weight: 600;
}</code>

ComponentB.vue:

<code class="css">footer {
  font-weight: 800;
}</code>

注意：

如果特定字体粗细下载失败，请将@nuxtjs/google-fonts包更新至v3.0.0-1或在模块配置中设置overwriting: true。

以上是如何在 Nuxt 项目中高效加载多种粗细的 Google 字体？的详细内容。更多信息请关注PHP中文网其他相关文章！