最近在项目开发过程中遇到一个很怪异的问题:开发环境中设置的字体样式有效,使用webpack打包后失效,导致本地字体正常,线上字体异常,我用的是 “冬青黑体简体中文”,
在控制台,对比发现:
线上: font-family: \51AC\9752\9ED1\4F53\7B80\4F53\4E2D\6587;
本地: font-family: "\51AC\9752\9ED1\4F53\7B80\4F53\4E2D\6587";
原来开发环境的时候,"冬青黑体简体中文" 被解析成unicode编码并且带着双引号,是正确的
webpack打包以后,"冬青黑体简体中文" 的双引号被错误解析并多加了个反斜杠,导致字体不生效
控制台里,将字体改成 "\51AC\9752\9ED1\4F53\7B80\4F53\4E2D\6587",就正常了,这就可以确定是webpack打包引起的问题
解决方法:
使用中文字体的英文编码,如:font-family: "Hiragino Sans GB"
问题产生原因:
虽然一些常见中文字体,例如“宋体”,“微软雅黑”等,直接使用中文名称作为CSS font-family的属性值也能生效,但为了规避乱码的风险,建议使用字体的英文名称。 还有一些中文字体,直接使用中文名称作为 font-family的属性值是没有效果的,如“思源黑体”, “兰亭黑体”等,需要使用对应的英文字体名称才可以。
总而言之一句话,你要想使用中文字体,就必须要知道其对应的英文名称。