美文网首页
vue项目中webpack打包后,字体失效

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

作者: Wellet | 来源:发表于2017-10-11 10:52 被阅读0次

    最近在项目开发过程中遇到一个很怪异的问题:开发环境中设置的字体样式有效,使用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的属性值是没有效果的,如“思源黑体”, “兰亭黑体”等,需要使用对应的英文字体名称才可以。

    总而言之一句话,你要想使用中文字体,就必须要知道其对应的英文名称。

    附:font-family中文字体对应的英文名称一览表

    相关文章

      网友评论

          本文标题:vue项目中webpack打包后,字体失效

          本文链接:https://www.haomeiwen.com/subject/jkniyxtx.html