如何让我的 NextJS 应用程序接受 otf 和 ttf 字体？

Question

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

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

自从我构建了自定义 webpack 的配置后，我想知道出了什么问题。

这是我的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 format("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");
}

任何提示都很好，谢谢

Answer 1

已解决next-fonts。只需将它安装到您的 next.config.js 中即可。

Answer 2

我使用了以下依赖项

npm install next-fonts

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

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

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

Answer 3

在项目根

的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;
    },
});

Answer 4

献给还在为这个问题苦恼的其他人

在 next 的最新版本中，您将所有静态资产存储在项目根目录中的 /public 目录中。在该目录中，将所有字体文件存储在目录 /fonts.

中

然后：

@font-face {
  font-family: 'font-name';
  src: url('/fonts/font-name.ttf'); // pattern: /directoryName/file.extension
 }

/* In your css file where you want to use the font */
.element { 
 font-family: 'font-name';
}

Answer 5

我的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;
    },
  }),
));

如何让我的 NextJS 应用程序接受 otf 和 ttf 字体？

How lead my NextJS app to accept otf and ttf fonts?

next.js