技术问答vue濡備綍寮曞叆ttf瀛椾綋鏂囦欢 - 扬州沐宇科技

鍦╲ue涓紩鍏tf瀛椾綋鏂囦欢鐨勬柟娉曪細1.鏂板缓vue.js椤圭洰锛?.鍒涘缓font.css鏂囦欢锛屽苟娣诲姞閰嶇疆锛?.閰嶇疆webpack.base.conf.js鏂囦欢锛?.浣跨敤@import鏂规硶寮曞叆ttf瀛椾綋鏂囦欢锛?p>

vue濡備綍寮曞叆ttf瀛椾綋鏂囦欢

鍏蜂綋姝ラ濡備笅锛?p>1.棣栧厛锛屽湪vue-cli涓垱寤轰竴涓獀ue.js椤圭洰锛?p>

vue create project-name

2.vue.js椤圭洰鍒涘缓濂藉悗锛屽湪椤圭洰涓垱寤轰竴涓猣ont.css鏂囦欢锛屾坊鍔犱互涓嬩唬鐮侊紱

@font-face { 
font-family: 'FZCYJ'; //閲嶅懡鍚嶅瓧浣撳悕
src: url('FZCYJ.ttf'); //寮曞叆瀛椾綋
font-weight: normal; 
font-style: normal; 
}

3.font.css鏂囦欢鍒涘缓濂藉悗锛屽湪webpack.base.conf.js鏂囦欢涓繘琛屼互涓嬮厤缃紱

{
test:/\/(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},

4.鏈€鍚庯紝webpack.base.conf.js鏂囦欢閰嶇疆濂藉悗锛屽湪椤圭洰涓娇鐢ˊimport鏂规硶鍗冲彲寮曞叆ttf瀛椾綋鏂囦欢锛?p>

@import './common/font/font.css';