使用 Webpack 打包字体文件的时候需要使用 file-loader 来处理打包文件,在 UmiJS 3 中可通过配置文件中的 chainWebpack 函数来自定义 Webpack 的配置。

  1. 当然首先你得先装上 file-loader
1
npm install --save-dev file-loader
  1. 然后编辑 UmiJS 的配置文件 ./umirc.ts 中的 chainWebpack
1
2
3
4
5
6
7
8
9
10
export default defineConfig({
// ...
chainWebpack(config){
config.module // 配置 file-loader
.rule('otf')
.test(/.otf$/)
.use('file-loader')
.loader('file-loader');
},
});
  1. 然后在 less 样式文件中申明字体
1
2
3
4
@font-face {
font-family: 'Customized Font';
src: url('path/to/font.otf');
}
  1. 最后在样式中使用申明好的字体
1
2
3
.text-with-customized-font-face {
font-family: 'Customized Font', 'sans-serif';
}