解決在vue項(xiàng)目中webpack打包后字體不生效的問(wèn)題

發(fā)布時(shí)間：2020-09-16 10:12:16 來(lái)源：腳本之家閱讀：400 作者：若晨工作室欄目：web開(kāi)發(fā)

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

解決在vue項(xiàng)目中webpack打包后字體不生效的問(wèn)題

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

解決在vue項(xiàng)目中webpack打包后字體不生效的問(wèn)題

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

解決在vue項(xiàng)目中webpack打包后字體不生效的問(wèn)題

解決方法：

嘗試了一下去掉雙引號(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è)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡