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

Posted

技术标签:

【中文标题】如何在 Nuxt 中高效加载谷歌字体【英文标题】:How to efficiently load google fonts in Nuxt 【发布时间】:2021-09-10 21:49:14 【问题描述】:

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

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

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

对于组件 A,font-weight600,对于组件 B,font-weight800。所以我认为在各个组件中给出不同的字体权重会起作用。但它不起作用。应用了唯一的基本字体,即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>

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>

组件A.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>

【问题讨论】:

【参考方案1】:

您正在从 CDN 加载字体,这不是推荐的处理方式。

这是由 Vitaly Friedman 撰写的 awesome performance checklist 2021 的引述

现在,我们中的许多人可能正在使用 CDN 或第三方主机来加载 Web 字体。一般来说,如果可以的话,自托管所有静态资产总是更好,因此请考虑使用 google-webfonts-helper,这是一种自托管 Google 字体的轻松方式。如果不可能,您也许可以通过页面来源代理 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,
      ,
    ],
  ]

【讨论】:

我没有得到你的答案。你能给出一些好的解释或任何博客或例子吗? @rakshit 我不知道在这里说什么。我提供了一个配置,以正确加载名为 Mali 的 Google 字体,并使用内置 Nuxt.js 模块。然后,您可以在需要的任何地方使用它。该模块还允许您设置特定的权重。您在这里需要什么? 你可以在你的组件中使用它和一些 CSS 并使用 font-weight: 700 或类似的设置权重。 它向我展示了这样。 Error: Cannot find module '@nuxtjs/google-fonts'

以上是关于如何在 Nuxt 中高效加载谷歌字体的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 base64 自动内联谷歌字体

如何在 Nuxt 中使用动态 CSS 文件?

如何在 Nuxt/Vuetify 中从头部删除 Google 字体 Roboto?

nuxt 如何预加载大图片

谷歌字体使页面加载在中国很慢

如何使用nuxt js将字体嵌入到所有页面