这是我用来在 nextJS 中添加本地字体的函数。构建中的错误详细信息如下所示。
布局.tsx
import localFont from 'next/font/local';
const content = localFont({
src: [
{
path: './fonts/light.woff2',
weight: '300',
style: 'normal',
},
{
path: './fonts/regular.woff2',
weight: '400',
style: 'normal',
},
{
path: './fonts/bold.woff2',
weight: '700',
style: 'normal',
},
],
display: 'swap',
variable: '--font-content',
fallback: ['system-ui', 'arial'],
adjustFontFallback: 'Times New Roman',
});
我正在使用以下版本的 docker 节点 - 22.2.0 nextJs - 14.2.4 纱线 4.2.2
这是构建时的错误
#16 1.452 ▲ Next.js 14.2.4
#16 1.452
#16 1.524 Creating an optimized production build ...
#16 8.896 Failed to compile.
#16 8.896
#16 8.900 src/app/layout.tsx
#16 8.900 An error occurred in `next/font`.
#16 8.900
#16 8.900 TypeError: Cannot read properties of undefined (reading 'ascent')
#16 8.900 at get ascent (/app/node_modules/next/dist/compiled/@next/font/dist/fontkit/index.js:1:797933)
#16 8.900 at getFallbackMetricsFromFontFile (/app/node_modules/next/dist/compiled/@next/font/dist/local/get-fallback-metrics-from-font-file.js:73:13)
#16 8.900 at nextFontLocalFontLoader (/app/node_modules/next/dist/compiled/@next/font/dist/local/loader.js:63:114)
#16 8.900 at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
#16 8.900 at async Span.traceAsyncFn (/app/node_modules/next/dist/trace/trace.js:154:20)
#16 8.900 at async /app/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:76:87
#16 8.900 at async Span.traceAsyncFn (/app/node_modules/next/dist/trace/trace.js:154:20)
在本地计算机上运行时工作正常，并且构建工作也没有错误。具有相同版本。
在 tailwind.config.js 中
fontFamily: {
content: ['var(--font-content)'],
}
我尝试了不同的回退和调整FontFallback值，但结果仍然相同。
就我而言，我遇到了字体文件问题。我刚刚删除它们并重新下载。
const notoSans = localFont({
variable: '--font-noto-sans',
src: [
{
path: './fonts/NotoSans-Light.ttf',
weight: '300',
},
{
path: './fonts/NotoSans-Regular.ttf',
weight: '400',
},
{
path: './fonts/NotoSans-Medium.ttf',
weight: '500',
},
{
path: './fonts/NotoSans-SemiBold.ttf',
weight: '600',
},
{
path: './fonts/NotoSans-Bold.ttf',
weight: '700',
},
],
});
export default function RootLayout({
children,
}: Readonly<{
children: ReactNode;
}>) {
return (
<html
lang='en'
className={notoSans.className}
>
<body>{children}</body>
</html>
);
}
