Next.js 如何引导我的NextJS应用程序接受otf和ttf字体？

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

ModuleParseError:模块分析失败：意外字符“”（1:0） 您可能需要适当的加载程序来处理此文件类型

我想知道发生了什么问题，因为我已经建立了一个自定义网页的配置

下面是我的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启动我的应用程序，精确描述我的字体格式vie

格式（“opentype”）

，但都失败了：

@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");
}

任何暗示都很好，

---

谢谢

已解决。只需将其安装到next.config.js中，即可完成安装。

我使用了以下依赖项

npm安装下一个字体

我的

next.config.js

如下所示

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

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

---

在项目根目录的next.config.js中添加此代码

    const withCSS = require('@zeit/next-css');

function HACK_removeMinimizeOptionFromCssLoaders(config) {
    console.warn(
        'HACK: Removing `minimize` option from `css-loader` entries in Webpack config',
    );
    config.module.rules.forEach(rule => {
        if (Array.isArray(rule.use)) {
            rule.use.forEach(u => {
                if (u.loader === 'css-loader' && u.options) {
                    delete u.options.minimize;
                }
            });
        }
    });
}

module.exports = withCSS({
    webpack(config) {
        HACK_removeMinimizeOptionFromCssLoaders(config);
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
            }
        });

        return config;
    },
});

---

对于仍在这个问题中受苦的其他人

在最新版本的next中，您将所有静态资产存储在项目根目录下的

/public

目录中。在该目录中，将所有字体文件存储在目录

/font

中

然后：

My next.config.js

const withCss = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withFonts = require('next-fonts');

module.exports = withFonts(withCss(
  withSass({
    webpack(config, options) {
      config.module.rules.push({
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000,
          },
        },
      });

      return config;
    },
  }),
));

---

在更改重置服务器并再次运行npm之后，如果在global-styles.css文件上执行此字体导入，则它将可用于所有

module.css

文件。请注意，global-styles.css文件应该位于项目folderHey的根目录中，我面临着类似的问题。您能帮助我吗？是@shankhadeephbhadra请让我知道您面临的问题？请访问-到目前为止的最佳答案，无需其他依赖项，无需配置文件。只是CSS。

const withCss = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withFonts = require('next-fonts');

module.exports = withFonts(withCss(
  withSass({
    webpack(config, options) {
      config.module.rules.push({
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000,
          },
        },
      });

      return config;
    },
  }),
));