亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Next.js 中帶有 next-less 的自托管字體

Next.js 中帶有 next-less 的自托管字體

蝴蝶不菲 2022-10-13 16:10:44
我想要什么,我想知道什么我想在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;

}


查看完整回答
反對 回復 2022-10-13
  • 1 回答
  • 0 關注
  • 207 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號