我正在尝试添加多个本地字体到nextjs 13。文档要求对单个文件执行以下操作。
我试着用下面的方法导入这两个文件:
import '@/styles/globals.css';
import localFont from '@next/font/local';
const myFonts = localFont({
src: '../public/Fonts/AnultraSlabRegular.ttf',
variable: '--Anultra-Slab',
});
const myFonts2 = localFont({
src: '../public/Fonts/IntroRegular.ttf',
variable: '--Intro-Regular',
});
export default function App({ Component, pageProps }) {
return (
<main className={'${myFonts2.className} ${myFonts.className}'}>
<Component {...pageProps} />
</main>
);
}
此方法在为特定元素分配字体族时不起作用。
提前感谢!
我不得不多次阅读文档。(因为它在示例中使用Google字体引用变量名。)我花了很长时间才发现添加多个类不应该通过使用className(大多数例子使用)来应用一个字体来完成;
// Do not use className for importing multiple local fonts
<body className={`bg-black ${nantes.className} ${spezia.className}`}>
{children}
</body>
但是通过使用这样的变量名;
// use variable for importing multiple fonts which you can use throughout the application
<body className={`bg-black ${nantes.variable} ${spezia.variable}`}>
{children}
</body>
为了完成，这是我现在的工作;
layout.tsx
import localFont from '@next/font/local'
const spezia = localFont({
src: '../fonts/FaroVariableWeb.woff2',
variable: '--font-spezia'
})
const nantes = localFont({
src: '../fonts/Nantes_Variable_Upright_Web.woff2',
variable: '--font-nantes'
})
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
{/*
<head /> will contain the components returned by the nearest parent
head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
*/}
<head />
<body className={`bg-black ${nantes.variable} ${spezia.variable}`}>
{children}
</body>
</html>
)
}
global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
html, body {
font-family: var(--font-spezia);
color:blueviolet;
}
h1 {
font-family: var(--font-nantes);
color: aqua;
}
你在用顺风车吗?我看到你为字体定义了一个变量，但没有在这里使用它，还有几个额外的步骤来连接Tailwind。
我看到的唯一语法问题是您已经提到的类名上的反引号。
import '@/styles/globals.css';
import localFont from '@next/font/local';
const myFonts = localFont({
src: '../public/Fonts/AnultraSlabRegular.ttf',
variable: '--Anultra-Slab',
});
const myFonts2 = localFont({
src: '../public/Fonts/IntroRegular.ttf',
variable: '--Intro-Regular',
});
export default function App({ Component, pageProps }) {
return (
<main className={`${myFonts2.className} ${myFonts.className}`}>
<Component {...pageProps} />
</main>
);
}
你也可以使用你在CSS中定义的变量，一旦你加载了它们。它应该看起来像:
button {
font-family: var(--Anultra-Slab);
}
我有类似的问题，字体正在加载，但没有应用，因为全局样式重写了font-family，使其默认为系统字体。我将font-family展开到"计算机化"的;查看问题，然后将font-family: inherit添加到有问题的类中来修复它。
您应该能够在浏览器开发工具中应用font-family: var(--Anultra-Slab)以确保字体正确加载，四处查看并找到问题。
希望这对你有帮助!
如果你正在使用顺风，那么我就是这样做的首先在根样式文件的顶部添加字体(可能命名为global .css或style.css):
@font-face {
font-family: "IntroRegular";
src: url("/Fonts/IntroRegular.ttf");
font-weight: 400;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "AnultraSlabRegular";
src: url("/Fonts/AnultraSlabRegular.ttf");
font-weight: 400;
font-display: swap;
font-style: normal;
}
然后在你的tailwind.config.js文件中，扩展font family:
theme: {
extend: {
fontFamily: {
IntroRegular: ["IntroRegular", "sans-serif"],
AnultraSlabRegular: ["AnultraSlabRegular", "sans-serif"]
}
}
}
现在，你可以像使用顺风字体一样使用这些字体，例如:
<main className="font-AnultraSlabRegular">