最近在項(xiàng)目開發(fā)過(guò)程中遇到如下問(wèn)題：開發(fā)環(huán)境中設(shè)置的字體樣式使用webpack打包后到生產(chǎn)環(huán)境不生效。如圖：

創(chuàng)新互聯(lián)公司成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)網(wǎng)站開發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計(jì),響應(yīng)式網(wǎng)站開發(fā),網(wǎng)頁(yè)設(shè)計(jì)師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢:18982081108

打開控制臺(tái)查看元素樣式，發(fā)現(xiàn)在開發(fā)環(huán)境的時(shí)候"微軟雅黑"被解析成unicode編碼并且?guī)еp引號(hào)，

但使用webpack打包以后，"微軟雅黑"的雙引號(hào)被錯(cuò)誤解析并多加了個(gè)反斜杠，導(dǎo)致字體不生效。

解決方法：

嘗試了一下去掉雙引號(hào)，也就是font-family:微軟雅黑，這樣瀏覽器并不會(huì)把中文字體用unicode編碼，樣式也可以正常顯示。但為了更好的兼容性，這里作者推薦使用中文字體的英文編碼，如：font-family:'Microsoft YaHei'。

附上幾個(gè)中文字體的英文對(duì)照：

黑體：SimHei

宋體：SimSun

新宋體：NSimSun

仿宋：FangSong

楷體：KaiTi

仿宋_GB2312：FangSong_GB2312

楷體_GB2312：KaiTi_GB2312

微軟正黑體：Microsoft JhengHei

微軟雅黑體：Microsoft YaHei

以上這篇解決在vue項(xiàng)目中webpack打包后字體不生效的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。