本文介绍了如何引导我的 NextJS 应用程序接受 otf 和 ttf 字体?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 NextJS,当我构建我的应用程序时,我的控制台返回了我:
I'm working with NextJS, when I build my app my console returns me:
ModuleParseError:模块解析失败:意外字符 '' (1:0)您可能需要适当的加载程序来处理此文件类型.
我想知道发生了什么问题,因为我已经构建了自定义 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));
我尝试使用精确的字体格式 vie format("opentype")
和没有它的 css 启动我的应用程序,但都失败了:
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
我的 next.config.js
看起来像这样
const withFonts = require('next-fonts');
module.exports = withFonts({
enableSvg: true,
webpack(config, options) {
return config;
}
});
这篇关于如何引导我的 NextJS 应用程序接受 otf 和 ttf 字体?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!