英文:
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 '@next/font/google'
const inter = Inter({ subsets: ['latin'] })
export default function MyComponent() {
return (
<main className={inter.className}>
Lorem ipsum dolar set amut
</main>
)
}
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 '@next/font/google'
const redactedScript = RedactedScript({ subsets: ['latin'] })
export default function MyComponent() {
return (
<main className={redactedScript.className}>
Lorem ipsum dolar set amut
</main>
)
}
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 '@next/font/google'
const redactedScript = Redacted_Script({ subsets: ['latin'] })
export default function MyComponent() {
return (
<main className={redactedScript.className}>
Lorem ipsum dolar set amut
</main>
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论