如何引导我的 NextJS 应用接受 otf 和 ttf 字体?

Question

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

模块分析错误： 模块分析失败： 意外字符 '' (1：0( 您可能需要适当的加载程序来处理此文件类型。

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

这是我的下一个.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 优先于我的字体格式的性质 vieformat("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 中，您可以将所有静态资源存储在项目根目录/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 2

我使用了以下依赖项

npm 安装下一个字体

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

const withFonts = require('next-fonts');
module.exports = withFonts({
enableSvg: true,
webpack(config, options) {
return config;
}
}); 

Answer 3

使用下一个字体解决。只需将其安装在 next.config 中.js即可完成。

Answer 4

在项目根目录上的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 5

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