我想要什么和我想知道什么
我想在已经使用@zeit/下一个无.js插件的Next应用程序中自托管字体(即Noto(。
我是否需要使用 npm 包下一个字体来自托管字体？如果是这样，我是否需要使用 npm 包 next-compose-plugins 来使下一个字体和下一个字体一起工作？
我是否需要将字体(如 WOFF(2((下载到应用程序仓库的/public目录中？或者使用像fontsource-noto-sans这样的npm包来提供这些字体也很简单吗？
我尝试了什么
我尝试同时使用下一个字体和下一个更少字体，使用下一个组合插件。我创建了这个/next.config.js：
const WithPlugins = require('next-compose-plugins');
const WithFonts = require('next-fonts');
const WithLess = require('@zeit/next-less');
module.exports = WithPlugins(
[
[ WithFonts, {} ],
[ WithLess, {} ]
],
{});
在我的单个全局 less 文件中，我把这个：
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Noto Serif'), local('NotoSerif'), url('/public/fonts/noto-serif.woff2') format('woff2');
}
body {
font-family:
'Noto Serif',
// and for debugging:
monospace;
}
我下载了Noto的字体文件，并将它们放在Next.js应用程序文件夹…/public/fonts文件夹中。
Noto 字体未加载，等宽字体继续使用。知道为什么吗？以及如何使用 Next.js + Next-less 轻松自托管字体的任何想法？
为什么不直接在文档头中做一个字体的链接
我看不到您的项目，但是如果您的字体public那么您应该能够引用外部加载的文件
<HEAD>
<link rel="preload" href="/public/fonts/noto-serif.woff2" as="font" type="font/woff2">
</HEAD>
别处
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
}
body {
font-family:
'Noto Serif',
// and for debugging:
monospace;
}