vue项目中引入字体包

  • 首先把字体文件(.ttf之类的)放在src/assets/font下;
  • 接着在文件夹里面放好字体文件(PingFang Bold.otf)
  • 在font文件夹里面新建一个font.css,内容如下
:@font-face { 
    font-family: 'PingFangSC-Bold'; 
    src: url('PingFang Bold.otf'); 
    font-weight: normal; 
    font-style: normal; 
}
  • vue.config.js配置如下:
    function assetsPath(_path) {
        const assetsSubDirectory = process.env.NODE_ENV === 'production' ?
            'static' :
            'static'
        return path.posix.join(assetsSubDirectory, _path)
    }
    
    
    module.exports = {
        configureWebpack:{
            module:{
                rules:[
                {
                  test:/\.(woff2?|eot|ttf|otf)(\?.*)$/,
                  loader:'url-loader',
                  options:{
                    limit: 10000,
                    name: assetsPath('fonrs/[name].[hash:7].[ext]')
                  }
                }
              ]
            }, 
        }
    }

    使用方法

     

你可能感兴趣的:(vue,vue,vue.js,前端)