avatar

ShinChven's Blog

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

UmiJS, file-loader, webpack, webpack-chain, font-face2020-12-30 06:28:34

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

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