如何在 Nuxt 中高效加载谷歌字体

Question

我正在使用这个谷歌字体font-family: 'Saira Semi Condensed', sans-serif;

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

我正在从事 NuxtJS 项目。我必须在两个不同的组件中使用这种字体，但具有不同的字体粗细。我已经导入了所有的谷歌字体链接Layout.vue。

对于组件 A 来说，font-weight是600& 对于组件 B 来说，font-weight是800。所以我认为在相应的组件中给出不同的字体粗细会起作用。但它不起作用。仅应用了基本字体，即 Saira Semi Condensed, sans-serif;，但未反映字体粗细值。为了解决这个问题，我需要导入两个具有相同字体但不同字体粗细的谷歌字体链接，这Layout.vue使得它变得多余。

对于字体粗细：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);

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

代码：

布局.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>

索引.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>

Answer 1

您正在从 CDN 加载字体，这不是推荐的做法。

\n

以下引用来自 Vitaly Friedman 撰写的2021 年出色绩效检查表

\n

\n

现在，我们中的许多人可能会使用 CDN 或第三方主机来加载 Web 字体。一般来说，如果可以的话，最好自行托管所有静态资源，因此请考虑使用 google-webfonts-helper，这是一种自行托管 Google Fonts 的无忧方式。如果\xe2\x80\x99s 不可能，你也许可以通过页面源代理Google Font 文件。

\n

\n

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

\n

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

\n

这里有一个使用示例nuxt.config.js

\n

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

\n

并且不要忘记处理@font-face CSS 端当然

\n\n

PS：如果您遇到特定权重未下载的问题，您可以overwriting: true在模块配置中使用或将包版本升级到v3.0.0-1。

\n