我想要什么，我想知道什么我想在Next.js应用程序中自托管字体（即 Noto），该应用程序已经使用了@zeit/next-less插件。我需要使用 npm-package next-fonts来自托管字体吗？如果是这样，我是否需要使用 npm-package next-compose-plugins来使 next-fonts 和 next-less 一起工作？我是否需要将字体（如 WOFF(2)）下载到/public我的应用程序存储库中的目录中？还是直接使用像fontsource-noto-sans这样的 npm-package 来提供这些字体？我试过的我尝试使用 next-compose-plugins 一起使用 next-fonts 和 next-less。我创建了这个/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, {} ] ], {});在我的单个全局少文件中，我放了这个：@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 的字体文件并将它们放在…/public/fontsNext.js-application 文件夹中的文件夹中。Noto 字体未加载，等宽字体继续使用。任何想法为什么？以及如何使用 Next.js + next-less 轻松自托管字体的任何想法？
1 回答
www说
TA贡献1775条经验 获得超8个赞
为什么不直接在文档头中做一个字体的链接 rel
我看不到您的项目，但如果您有字体，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;
}
添加回答
举报
0/150
提交
取消