如何让我的 NextJS 应用接受 otf 和 ttf 字体? [英] How lead my NextJS app to accept otf and ttf fonts?

问题描述

我正在使用 NextJS，当我构建我的应用程序时，我的控制台返回我:

I'm working with NextJS, when I build my app my console returns me:

ModuleParseError: 模块解析失败:意外字符 '' (1:0)您可能需要一个合适的加载器来处理这种文件类型.

ModuleParseError: Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type.

我想知道出了什么问题，因为我已经构建了一个自定义 webpack 的配置.

I'm wondering what going's wrong since I have build a custom webpack's configuration.

这里是我的 next.config.js:

Here my next.config.js:

module.exports={ 
  exportPathMap: () => ({ 
      "/": {page: '/'}
  })
}

const config = { 
  cssModules: true,
  module:{ 
    rules:[ 
      {
        test:/\.(png|jpg|woff|svg|eot|ttf|woff2|otf)$/,
        loader:'url-loader?limit=8192&name=images/[name].[ext]'

        }
    ]
  }

}

// config.module.rules.push(

//   );

const   withCss =   require('@zeit/next-css');
const   withImages  =   require('next-images');
module.exports  =   withImages(withCss(config));

我尝试使用 css 来启动我的应用程序，该 css 精确了我的字体格式 vie format("opentype") 和没有它，但都失败了:

I have tried to launch my app with a css precising the nature of my font format vie format("opentype") and without it, but both fail:

@font-face {
    font-family: Moonlight;
    src: url(../assets/choiceFonts/Moonlights_on_the_Beach.ttf);
}

@font-face {
    font-family: Nenuphar;
    src: url(../assets/choiceFonts/Nenuphar_of_Venus.otf) format("opentype");
}


@font-face {
    font-family: Prida;
    src: url(../assets/choiceFonts/Prida01.otf) format("opentype");
}

任何提示都会很棒，谢谢

Any hint would be great, thanks

推荐答案

我使用了以下依赖项

npm install next-fonts

npm install next-fonts

我的next.config.js看起来像这样

 const withFonts = require('next-fonts');

 module.exports = withFonts({
    enableSvg: true,
    webpack(config, options) {
      return config;
    }
 }); 

这篇关于如何让我的 NextJS 应用接受 otf 和 ttf 字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！