在 UmiJS 中打包与加载自定义字体

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

1. 当然首先你得先装上 file-loader

bash
Wrap|Copy
npm install --save-dev file-loader

2. 然后编辑 UmiJS 的配置文件 ./umirc.ts 中的 chainWebpack

TypeScript
Wrap|Copy
export default defineConfig({
  // ...
  chainWebpack(config){
    config.module // 配置 file-loader
      .rule('otf')
      .test(/.otf$/)
      .use('file-loader')
      .loader('file-loader');
  },
});

3. 然后在 less 样式文件中申明字体

less
Wrap|Copy
@font-face {
  font-family: 'Customized Font';
  src: url('path/to/font.otf');
}

4. 最后在样式中使用申明好的字体

less
Wrap|Copy
.text-with-customized-font-face {
    font-family: 'Customized Font', 'sans-serif';
}