我正在尝试使用我的 NextJS 应用程序自托管 webfonts，但遇到了麻烦。
这是 URL 浏览器尝试访问这些字体:
localhost:3000/_next/static/css/fonts/Avenir.woff2
_project_dir/static/fonts/Avenir.woff2
<link rel="preload" as="font" href="/static/fonts/Avenir.woff2" type="font/woff2" crossorigin />
_app.js :
render() {
const { Component, pageProps } = this.props;
return (
<Container>
<link href="https://fonts.googleapis.com/css?family=Poppins:500,500i,600&display=swap" rel="stylesheet" />
<link rel="preload" as="font" href="/static/fonts/Avenir.woff2" type="font/woff2" crossorigin />
<link rel="preload" as="font" href="/static/fonts/AvenirHeavy.woff2" type="font/woff2" crossorigin />
<Head>
<title>Project</title>
</Head>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Component pageContext={this.pageContext} {...pageProps} />
</PersistGate>
</Provider>
</Container>
);
}
}
main.css @font-face {
font-family: 'Avenir';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url('fonts/Avenir.eot');
src: url('fonts/Avenir.eot?#iefix') format('embedded-opentype'), url('fonts/Avenir.woff2') format('woff2'),
url('fonts/Avenir.woff') format('woff'), url('fonts/Avenir.ttf') format('truetype');
}
@font-face {
font-family: 'Avenir';
font-weight: 500;
src: url('fonts/Avenir.eot');
src: url('fonts/Avenir.eot?#iefix') format('embedded-opentype'), url('fonts/Avenir.woff2') format('woff2'),
url('fonts/Avenir.woff') format('woff'), url('fonts/Avenir.ttf') format('truetype');
}
@font-face {
font-family: 'Avenir';
font-weight: 900;
src: url('fonts/AvenirHeavy.eot');
src: url('fonts/AvenirHeavy.eot?#iefix') format('embedded-opentype'), url('fonts/AvenirHeavy.woff2') format('woff2'),
url('fonts/AvenirHeavy.woff') format('woff'), url('fonts/AvenirHeavy.ttf') format('truetype');
}
next.config.js : webpack(config, options) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
},
},
});
return config;
},
最佳答案
你不需要任何额外的依赖来使用字体。只需将您的字体移至 public/fonts而不是 static/fonts .
然后预加载:
<link rel="preload" href="/fonts/Avenir.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
Files inside
publiccan then be referenced by your code starting from the base URL (/).
此外，在 JSX 中，它是
crossOrigin不是 crossorigin , 它期望 string ，而不是 Boolean .在 CSS/SCSS 中(在每个 src-url 中添加斜杠):
@font-face {
/* ... */
src: url('/fonts/Avenir.woff2') format('woff2');
/* ... */
}
url-loader 那样被内联。 .但是我相信无论如何内联所有字体都是非常低效的。 (您设置了 100000 的限制。几乎所有 woff/woff2 字体都会被内联。)
关于javascript - 使用 NextJS 的自托管字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57590195/