vuecli3引入外部字体

1:

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

猜你喜欢

转载自www.cnblogs.com/binglove/p/12589549.html