如何在Next.js中使用@next/font/google导入标题中带有空格的Google字体?

huangapple go评论59阅读模式
英文:

How do I import a Google Font with a space in the title in Next.js with @next/font/google?

问题

[Next.js文档关于导入Google字体](https://nextjs.org/docs/basic-features/font-optimization#google-fonts)展示了导入Google字体的推荐方法:

```js
import { Inter } from '@next/font/google'
const inter = Inter({ subsets: ['latin'] })

export default function MyComponent() {
  return (
    <main className={inter.className}>
      Lorem ipsum dolar set amut
    </main>
  )
}

这种方法适用于Inter字体和其他具有单词标题的字体。我试图导入一个名为Redacted Script的字体,它的标题中有一个空格。

我尝试将它的标题大写:

import { RedactedScript } from '@next/font/google'
const redactedScript = RedactedScript({ subsets: ['latin'] })

export default function MyComponent() {
  return (
    <main className={redactedScript.className}>
      Lorem ipsum dolar set amut
    </main>
  )
}

然而,这段代码给我报错:

`@next/font` 错误:
未知字体`RedactedScript`

如何使用@next/font/google导入类似Redacted Script这样带有空格的Google字体?

英文:

The Next.js documentation on importing Google Fonts shows this recommended method of importing Google fonts:

import { Inter } from &#39;@next/font/google&#39;
const inter = Inter({ subsets: [&#39;latin&#39;] })

export default function MyComponent() {
  return (
    &lt;main className={inter.className}&gt;
      Lorem ipsum dolar set amut
    &lt;/main&gt;
  )
}

This method works for the Inter font and other fonts with single word titles. I'm trying to import a font called Redacted Script which has a space in the title.

I tried just TitleCasing it:

import { RedactedScript } from &#39;@next/font/google&#39;
const redactedScript = RedactedScript({ subsets: [&#39;latin&#39;] })

export default function MyComponent() {
  return (
    &lt;main className={redactedScript.className}&gt;
      Lorem ipsum dolar set amut
    &lt;/main&gt;
  )
}

However this code gives me the error:

`@next/font` error:
Unknown font `RedactedScript`

How do I use @next/font/google to import a Google font with a space in it like Redacted Script?

答案1

得分: 0

Thanks to a really cool guy at Vercel helping me debug this I've got the answer: Capital_Snake_Case!

Here's the working code:

import { Redacted_Script } from '@next/font/google'
const redactedScript = Redacted_Script({ subsets: ['latin'] })

export default function MyComponent() {
  return (
    <main className={redactedScript.className}>
      Lorem ipsum dolar set amut
    </main>
  )
}
英文:

Thanks to a really cool guy at Vercel helping me debug this I've got the answer: Capital_Snake_Case!

Here's the working code:

import { Redacted_Script } from &#39;@next/font/google&#39;
const redactedScript = Redacted_Script({ subsets: [&#39;latin&#39;] })

export default function MyComponent() {
  return (
    &lt;main className={redactedScript.className}&gt;
      Lorem ipsum dolar set amut
    &lt;/main&gt;
  )
}

huangapple
  • 本文由 发表于 2023年2月14日 02:42:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/75440007.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定