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


Posted in Javascript onSeptember 01, 2018

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

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

打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号,

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

但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效。

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

解决方法:

尝试了一下去掉双引号,也就是font-family:微软雅黑,这样浏览器并不会把中文字体用unicode编码,样式也可以正常显示。但为了更好的兼容性,这里作者推荐使用中文字体的英文编码,如:font-family:'Microsoft YaHei'。

附上几个中文字体的英文对照:

黑体:SimHei

宋体:SimSun

新宋体:NSimSun

仿宋:FangSong

楷体:KaiTi

仿宋_GB2312:FangSong_GB2312

楷体_GB2312:KaiTi_GB2312

微?正黑体:Microsoft JhengHei

微软雅黑体:Microsoft YaHei

以上这篇解决在vue项目中webpack打包后字体不生效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript arguments 多参传值函数
Oct 24 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
jquery密码强度校验
Dec 02 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 #Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 #Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 #Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 #jQuery
vue初始化动画加载的实例
Sep 01 #Javascript
jQuery解析json格式数据示例
Sep 01 #jQuery
vue+vue-router转场动画的实例代码
Sep 01 #Javascript
You might like
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
JAVA/JSP学习系列之六
2006/10/09 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
js 与或运算符 || && 妙用
2009/12/09 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
Python字符串中查找子串小技巧
2015/04/10 Python
python创建进程fork用法
2015/06/04 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
SQL语言面试题
2013/08/27 面试题
青年创业培训欢迎词
2014/01/10 职场文书
公司企业表扬信
2014/01/11 职场文书
绿色环保口号
2014/06/12 职场文书
遗愿清单观后感
2015/06/09 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android