Next.js 中带有 next-less 的自托管字体
我想要什么，我想知道什么
我想在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说
为什么不直接在文档头中做一个字体的链接 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;}
随时随地看视频慕课网APP
相关分类
JavaScript