如何在Nuxt中高效加载Google字体 [英] How to efficiently load google fonts in Nuxt

问题描述

我正在使用此Google字体font-family: 'Saira Semi Condensed', sans-serif;

链接：https://fonts.google.com/specimen/Saira+Semi+Condensed

我正在参与一个NuxtJS项目。我必须在两个不同的组件中使用此字体，但字体粗细不同。我已导入Layout.vue中的所有Google字体链接。

对于组件A，font-weight是600&对于组件B，font-weight是800。所以我认为在各个组件中给出不同的字体粗细是可行的。但这并不管用。应用了唯一的基本字体，即Saira Semi Condensed, sans-serif;，但没有反映字体粗度值。要解决此问题，我需要在Layout.vue中导入两个字体相同但字体粗细不同的Google字体链接，这会造成冗余。

字体粗细：600

@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@600&display=swap%27);

字体粗细：800

@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@800&display=swap%27);

我认为我为同一字体导入两个链接的方式看起来不太好。你们能帮我解决这个问题吗？ 提前感谢您。

编码：

Layout.vue

<template>
  <div>
    <Nuxt />
  </div>
</template>

<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
</style>

index.vue

<template>
  <div>
    <Navbar />
    <ComponentA />
    <ComponentB />
    <Footer />
  </div>
</template>

<script>
import Navbar from '../components/Navbar.vue'
import Clock from '../components/ComponentA.vue'
import Days from '../components/ComponentB.vue'
import Footer from '../components/Footer.vue'
export default {
  components: {
    Navbar,
    ComponentA,
    ComponentB,
    Footer,
  },
}
</script>

ComponentA.vue

<template>
  <div>
    <h1>I am component A</h1>
  </div>
</template>

<script>
export default {
  name: 'ComponentA',
}
</script>

<style scoped>
footer {
    color: blue;
    font-family: 'Saira Semi Condensed', sans-serif;
    font-size: 20px;
    text-align: center;
 }
</style>

ComponentB.vue

<template>
  <div>
    <h1>I am component B</h1>
  </div>
</template>

<script>
export default {
  name: 'ComponentB',
}
</script>

<style scoped>
footer {
    color: red;
    font-family: 'Saira Semi Condensed', sans-serif;
    font-size: 24px;
    text-align: center;
 }
</style>

推荐答案

您正在从cdn加载字体，这不是推荐的操作方式。

以下是Vitaly Friedmanawesome performance checklist 2021撰写的awesome performance checklist 2021中的一句话

现在，我们中的许多人可能正在使用CDN或第三方主机从加载Web字体。总而言之，如果可能的话，最好是把你所有的静电资产都托管起来，所以可以考虑使用google-webfonts-helper，这是一种轻松的自助托管谷歌字体的方式。如果不可能，您可以通过页面来源代理Google字体文件。

看到这个，我推荐使用@nuxtjs/google-fonts，这是一个很酷的Nuxt模块。

我实际上已经询问过我的模块配置是否正常，以下是GitHub的问题：https://github.com/nuxt-community/google-fonts-module/issues/26

这里是nuxt.config.js

中的用法示例

export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          Mali: {
            wght: [400, 600, 700],
          },
        },
        subsets: ['latin'],
        display: 'swap',
        prefetch: false,
        preconnect: false,
        preload: false,
        download: true,
        base64: false,
      },
    ],
  ]
}

这篇关于如何在Nuxt中高效加载Google字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！