如何获取多种谷歌字体答案

【问题标题】：How to fetch multiple google fonts如何获取多种谷歌字体
【发布时间】：2021-08-02 00:14:10
【问题描述】：

我正在 NextJS 中开发一个使用大约 5 种 Google 字体的个人项目。

仅当页面New 重新加载或我使用<a></a> 标签而不是<Link></Link> 导航到页面时才会获取字体。

这是我当前需要字体的页面的代码，

export async function getStaticProps() {
    const fonts = getFontNames(); // returns a static list of strings like ['Monserrat', 'Product Sans', ...].
    const fontsLink = "https://fonts.googleapis.com/css2?family=" + fonts.map(cV => cV.replace(/ /g, '+')).join('&family=') + "&display=swap"
    return {
        props: {
            fonts,
            fontsLink
        }
    }
}


export default function New({ fonts, fontsLink }) {
    return (
        <div className={styles.container}>
            <Head>
                <title>New</title>
                <link rel="preconnect" href="https://fonts.gstatic.com" />
                <link href={fontsLink} rel="stylesheet" />
            </Head>
            ...
       </div>
}

这就是我导航到页面 New 的方式，

<Link href="/new">
   <a className={styles.card}>
      <h2>New &rarr;</h2>
   </a>
</Link>

【问题讨论】：

标签： html css reactjs next.js google-fonts

【解决方案1】：

在测试字体之前，请确保您已在网络选项卡中禁用浏览器缓存。


import PageLayout from "../components/Page/PageLayout"
import Head from "next/head"

export default function About({ fonts, fontsLink }) {
  return (
      <Head>
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link href={fontsLink} rel="stylesheet" />
      </Head>
  )
}

export async function getStaticProps() {
  const fonts = ["Monserrat", "Product Sans", "Girassol"]
  const fontsLink =
    "https://fonts.googleapis.com/css2?family=" +
    fonts.map((cV) => cV.replace(/ /g, "+")).join("&family=") +
    "&display=swap"
  return {
    props: {
      fonts,
      fontsLink,
    },
  }
}

使用任何一种导航方式都会为我加载字体。


<Link href="/About">About</Link>
<Link href="/About">
    <a>
       <h2>About page using Link</h2>
    </a>
</Link>

【讨论】：

是的，从技术上讲，我正在做的事情必须有效。它在开发中有效，但在生产中无效。这是由于 NextJS 的静态生成吗？还是我使用 Service Worker 来安装 PWA？
感谢您的帮助，但我决定使用 CSS 导入。有点晚了，但它有效。