解决vue项目中字体打包后不生效的问题

最近在项目开发过程中，遇到了以下问题：开发环境中设置的字体样式，用webpack打包后，在生产环境中不会生效。如图所示：

打开控制台查看元素样式，发现‘微软雅黑’在开发环境中被解析成带双引号的unicode代码。

但是用webpack打包后，‘微软雅黑’的双引号解析错误，加了反斜杠，导致字体无效。

解决方法：

尽量去掉双引号，也就是font-family:微软雅黑，这样浏览器就不会用unicode编码中文字体，样式也能正常显示。但是，为了更好的兼容性，作者建议使用中文字体的英文编码，如font-family :微软雅黑’。

附上几个中文字体的英文版本：

粗体：SimHei

歌曲风格：SimSun

新歌风格：新歌

仿宋：宋芳

斜体的凯迪

仿宋_ gb2312:宋芳_ gb2312

斜体脚本_ gb2312: kaiti _ gb2312

微软大胆：微软真黑

微软雅黑：微软雅黑

以上文章解决了vue项目中，字体打包后无法生效的问题，这也是边肖与大家分享的全部内容。希望能给大家一个参考，多支持我们。