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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM