解決在vue項(xiàng)目中webpack打包后字體不生效的問題
最近在項(xiàng)目開發(fā)過(guò)程中遇到如下問題：開發(fā)環(huán)境中設(shè)置的字體樣式使用webpack打包后到生產(chǎn)環(huán)境不生效。如圖：
打開控制臺(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打包后字體不生效的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js+element-ui動(dòng)態(tài)配置菜單的實(shí)例
今天小編就為大家分享一篇vue.js+element-ui動(dòng)態(tài)配置菜單的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue2.0在沒有dev-server.js下的本地?cái)?shù)據(jù)配置方法
這篇文章主要介紹了vue2.0在沒有dev-server.js下的本地?cái)?shù)據(jù)配置方法的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02
基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果
在vue項(xiàng)目中,我們通常會(huì)使用Axios來(lái)與后臺(tái)進(jìn)行數(shù)據(jù)交互,而當(dāng)我們發(fā)起請(qǐng)求時(shí),常常需要在頁(yè)面上顯示一個(gè)加載框（Loading）,然后等數(shù)據(jù)返回后自動(dòng)將其隱藏,本文介紹了基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果,需要的朋友可以參考下2024-03-03
這篇文章主要給大家介紹了關(guān)于Vue組件化常用方法之組件傳值與通信的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了vue中(el-button的五種類型，三種css格式)具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue項(xiàng)目中v-bind動(dòng)態(tài)綁定src路徑不成功問題及解決
這篇文章主要介紹了Vue項(xiàng)目中v-bind動(dòng)態(tài)綁定src路徑不成功問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3 el-upload單張圖片回顯、編輯、刪除功能實(shí)現(xiàn)
這篇文章主要介紹了vue3 el-upload單張圖片回顯、編輯、刪除功能實(shí)現(xiàn),圖片回顯時(shí)隱藏上傳區(qū)域,鼠標(biāo)懸浮顯示遮罩層進(jìn)行編輯、刪除操作,刪除圖片后顯示上傳區(qū)域,本文通過(guò)實(shí)例代碼分享實(shí)現(xiàn)方法,感興趣的朋友一起看看吧2023-12-12
基于vue3+antDesign2+echarts?實(shí)現(xiàn)雷達(dá)圖效果
這篇文章主要介紹了基于vue3+antDesign2+echarts?實(shí)現(xiàn)雷達(dá)圖,本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue中遍歷數(shù)組的新方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
在Vue 3中,Provide和Inject是一對(duì)用于組件間數(shù)據(jù)傳遞的API,通常用于父組件向其子組件傳遞數(shù)據(jù),但并不通過(guò)props的方式,本文將深入探討Provide和Inject的工作原理,并通過(guò)示例代碼幫助你理解如何在你的Vue應(yīng)用中使用它們,需要的朋友可以參考下2025-02-02