---
title: "在 UmiJS 中打包与加载自定义字体"
date: 2020-12-29T22:28:34.000Z
author: Z.SHINCHVEN
tags: [UmiJS, file-loader, webpack, webpack-chain, font-face]
canonical: https://atlassc.net/2020/12/30/bundle-font-face-in-umijs
---
使用 Webpack 打包字体文件的时候需要使用 file-loader 来处理打包文件，在 UmiJS 3 中可通过配置文件中的 chainWebpack 函数来自定义 Webpack 的配置。

1. 当然首先你得先装上 [file-loader](https://webpack.js.org/loaders/file-loader/)

```bash
npm install --save-dev file-loader
```

2. 然后编辑 UmiJS 的配置文件 [./umirc.ts](https://umijs.org/config#chainwebpack) 中的 [chainWebpack](https://github.com/neutrinojs/webpack-chain)

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

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

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

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

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