less中引入字体包

 

webpack配置中需要配置改字体包类型：

{
        test: /\.(svg|eot|ttf|woff|otf|woff2)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4096, // <= 4kb的字体base64内联
          },
        },
        generator: {
          filename: `fonts/[name].[hash:8]-v${version}[ext]`,
        },
      },

字体包放置在静态文件夹内：

定义一个less文件，并在最外层dom（全局）引入，即可在项目内任一位置使用该字体

@font-face {
  font-family: 'YourFont';
  src: url('./font/GT-Alpina-Fine-Standard-Regular-Italic-Trial.otf');
}

我是在router层引入该less文件

然后在router内的任意less文件下都可以使用该字体

font-family: YourFont;