英文:
Next.js Fonts and CSS vars
问题
我正在尝试使用“next”方式来添加字体。然而，我觉得他们解释的方式似乎过于复杂，只是为了预加载一个字体。
我尝试导出一个创建字体并使用变量标签创建CSS变量的函数。但是这并不起作用，我已经将字体导入到我的page.js文件中。然后，我导出了一个创建字体的const函数，使用了这个变量：
import { Oxygen } from "next/font/google";
export const oxygen = Oxygen({
display: 'swap',
variable: '--font-oxygen',
subsets: ['latin'],
})
然后尝试在链接的CSS样式表中使用它，将字体族设置为确切的变量，如下所示：
font-family: var(--font-oxygen);
我正在尝试学习Next.js，但这让我感到沮丧。它不起作用，除非我做错了，否则我不想将我的HTML属性的类名设置为字体类名。
英文:
I am trying to use the "next" way of adding fonts. However I feel like the way they explain it seems extremely complicated just to preload a font.
I tried to export a function creating the font and then using the variable tag to create a css var. This doesnt work, I have imported the font into my page.js file. Then I exported a const function creating the font with this variable;
import { Oxygen } from "next/font/google";
export const oxygen = Oxygen({
display: 'swap',
variable: '--font-oxygen',
subsets: ['latin'],
})
Then tried to use it in the linked css style sheet setting the font family to the exact var using;
font-family: var(--font-oxygen);
I am trying to learn Nextjs and this is just putting me off. It wont work, I dont want to set the class name of my html attributes to the font class name either unless I am doing it all wrong.
答案1
得分: 0
如果这是您整个应用程序中使用的字体，您可以在index.js（使用页面路由器时）或在app文件夹中的layout.js中导入字体。您不需要将其添加到您的CSS中。
然后添加classname={oxygen.className}
对于页面路由器的示例：
import { Oxygen } from 'next/font/google'
const oxygen = Oxygen({
display: 'swap',
variable: '--font-oxygen',
subsets: ['latin'],
})
export default function MyApp({ Component, pageProps }) {
return (
<main className={oxygen.className}>
<Component {...pageProps} />
</main>
)
}
英文:
If this is a font used in your entire application you can import the font in index.js (when using Pages Router) or in the layout.js in your app folder (when using App Router). You don't have to add it to your CSS.
Then add classname={oxygen.className}
For Pages Router example;
import { Oxygen } from 'next/font/google'
const oxygen = Oxygen({
display: 'swap',
variable: '--font-oxygen',
subsets: ['latin'],
})
export default function MyApp({ Component, pageProps }) {
return (
<main className={oxygen.className}>
<Component {...pageProps} />
</main>
)
}
答案2
得分: 0
你应该使用字体的 font.variable 方法，而不是 font.className 方法。
import { Oxygen } from 'next/font/google'
const oxygen = Oxygen({
display: 'swap',
variable: '--font-oxygen',
subsets: ['latin'],
})
export default function MyApp({ Component, pageProps }) {
return (
<main className={oxygen.variable}> // 使用 .variable，而不是 .className
<Component {...pageProps} />
</main>
)
}
现在，你可以将这个变量添加到任何CSS类中：
.text {
font-family: var(--font-oxygen);
}
注意： 这适用于应用程序路由器，但我不确定是否适用于页面路由器。
这应该在页面加载时预加载字体，这意味着在页面加载时不会闪烁。
英文:
You are supposed to use the font's font.variable method, not the font.className method.
import { Oxygen } from 'next/font/google'
const oxygen = Oxygen({
display: 'swap',
variable: '--font-oxygen',
subsets: ['latin'],
})
export default function MyApp({ Component, pageProps }) {
return (
<main className={oxygen.variable}> // USE .variable, NOT .className
<Component {...pageProps} />
</main>
)
}
Now, you can add that variable to any css class:
.text {
font-family: var(--font-oxygen);
}
Note: This works with app router, but I am unsure if it works for page router.
This should preload the font as well, which means that it does not flicker when the page loads.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论