文章/答案/技术大牛

发布

社区首页 >问答首页 >带有next-less的Next.js中的自托管字体

问带有next-less的Next.js中的自托管字体
EN

Stack Overflow用户

提问于 2020-06-21 04:10:45

回答 1查看 425关注 0票数 1

我想要什么，我想知道什么

我想在已经使用了@zeit/next-less插件的Next.js-application中自托管一个字体(即Noto)。

我需要使用npm-package next-fonts来托管字体吗？如果是这样，我是否需要使用npm-package next-compose-plugins来使next-fonts和next-less一起工作？

我是否需要将字体(如WOFF(2))下载到我的应用程序存储库的/public目录中？或者也可以直接使用像fontsource-noto-sans这样的npm包来提供这些字体？

我尝试过的

我尝试同时使用next-fonts和next-less，使用next-compose-plugins。我创建了这个/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轻松地自托管字体吗？

javascript

reactjs

less

next.js

font-face

回答 1

Stack Overflow用户

发布于 2020-06-22 20:45:58

为什么不在文档头中直接做一个字体的link 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;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62491123

复制

相似问题

问带有next-less的Next.js中的自托管字体
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有next-less的Next.js中的自托管字体EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有next-less的Next.js中的自托管字体
EN