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]')
                }
              }
            ]
          }, 
      }
  }

  使用方法

  <style>
   @import url('@/assets/font/font.css');
  .activaty-keyword-box {
          position: absolute;
          left: 30px;
          top: 310px;
          font-size: 25px;
          writing-mode: vertical-rl;
          font-family: PingFangSC-Bold;
  }
  </style>