1:vuecli3引入外部字体

 

font.scss文件

@font-face {
font-family: 'kuhei'; //重命名字体名
src: url('./kuhei.ttf') ; //引入字体
font-weight: normal;
font-style: normal;
}
 
2:main.js
import '@/assets/fonts/font.scss'; // 引入字体样式
3:vue.config.js
const utils = {
assetsPath: function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
// 生产环境下的 static 路径
? 'static'
// 开发环境下的 static 路径
: 'static'
 
return path.posix.join(assetsSubDirectory, _path)
},
resolve: function(dir) {
return path.join(__dirname, '..', dir)
}
}

 

module:{
rules:[
{
test:/\.(woff2?|eot|ttf|otf)(\?.*)$/,
loader:'url-loader',
options:{
limit: 10000,
name: utils.assetsPath('fonrs/[name].[hash:7].[ext]')
}
}
]
},vuecli3引入外部字体

 

 

相关文章:

  • 2022-12-23
  • 2021-11-09
  • 2022-12-23
  • 2022-12-23
  • 2021-08-22
  • 2021-09-23
  • 2022-12-23
猜你喜欢
  • 2021-05-22
  • 2021-12-27
  • 2022-12-23
  • 2021-09-20
  • 2021-11-30
  • 2021-10-10
相关资源
相似解决方案