vue项目中webpack打包后,字体失效

Ba la la la ~ 读者朋友们,你们好啊,又到了冷锋时间,话不多说,发车!


写在开头:

最近在项目开发过程中遇到一个很怪异的问题:开发环境中设置的字体样式有效,使用webpack打包升级后失效,导致本地字体正常,线上字体异常,使用的是 “宋体”

在控制台,对比发现:

线上: font-family: \5B8B\4F53;
本地: font-family: '\5B8B\4F53';

原来在开发环境的时候,"宋体" 被解析成unicode编码('\5B8B\4F53')并且带着双引号,正确
webpack打包以后,"宋体" 的双引号被错误解析(\5B8B\4F53)并多加了个反斜杠,导致字体不生效
控制台里,将字体改成 '\5B8B\4F53',就正常了,可以确定是webpack打包引起的问题

解决方法:

使用中文字体的英文编码,如:font-family: "Hiragino Sans GB"

附:
https://www.zhangxinxu.com/study/201703/font-family-chinese-english.html


以上为个人意见,如有雷同,纯属巧合,欢迎大家多提意见!Bey 了 个 Bey ~

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 最近在项目开发过程中遇到一个很怪异的问题:开发环境中设置的字体样式有效,使用webpack打包后失效,导致本地字体...
    Wellet阅读 5,787评论 0 1
  • 大家都知道,在不同操作系统、不同游览器里面默认显示的字体是不一样的,并且相同字体在不同操作系统里面渲染的效果也不尽...
    陈_宣阅读 2,065评论 0 7
  • 一、概念 参考网页字体Serif和Sans-serif的区别及浏览器字体的设置CSS Font知识整理总结 1.F...
    合肥黑阅读 6,581评论 0 12
  • 字体设置不建议使用中文字,而是使用Unicode码,这样做可以确保各个手机终端的兼容性。 例如:font:"宋体"...
    939a09e5f640阅读 3,132评论 0 2
  • css中文字体乱码解决方案 css中文字体乱码解决方案:把css编码和html页面编码统一起来。如果html页面是...
    繁华荆棘一路向北阅读 1,759评论 0 0

友情链接更多精彩内容