编程 Javascript

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

Posted in Javascript onSeptember 01, 2018

最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用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打包后字体不生效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

若晨工作室

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS随机漂浮广告代码具体实例

Nov 19 Javascript

jquery iframe操作详细解析

Nov 20 Javascript

jquery选择器之层级过滤选择器详解

Jan 27 Javascript

js判断当前浏览器类型,判断IE浏览器方法

Jun 02 Javascript

jquery实现简易的移动端验证表单

Nov 08 Javascript

实例代码讲解jquery easyui动态tab页

Nov 17 Javascript

JavaScript比较两个数组的内容是否相同(推荐)

May 02 Javascript

基于构造函数的五种继承方法小结

Jul 27 Javascript

bootstrap Table插件使用demo

Aug 07 Javascript

详解使用React制作一个模态框

Mar 14 Javascript

Node.js实现用户评论社区功能（体验前后端开发的乐趣）

May 09 Javascript

微信小程序学习总结（四）事件与冒泡实例分析

Jun 04 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

微信开发之获取JSAPI TICKET

2017/07/07 PHP

IE与firefox下Dhtml的一些区别小结

2009/12/02 Javascript

基于JQuery的模拟苹果桌面Dock效果(稳定版)

2012/10/15 Javascript

如何制作浮动广告 JavaScript制作浮动广告代码

2012/12/30 Javascript

Jquery 复选框取值兼容FF和IE8(测试有效)

2013/10/29 Javascript

javascript实现信息的显示和隐藏如注册页面

2013/12/03 Javascript

Jquery下EasyUI组件中的DataGrid结果集清空方法

2014/01/06 Javascript

JavaScript对象的property属性详解

2014/04/01 Javascript

仅30行代码实现Javascript中的MVC

2016/02/15 Javascript

JavaScript函数中关于valueOf和toString的理解

2016/06/14 Javascript

鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例

2016/12/26 Javascript

jQuery实现弹幕效果

2017/02/17 Javascript

vue、react等单页面项目应该这样子部署到服务器

2018/01/03 Javascript

nodejs实现超简单生成二维码的方法

2018/03/17 NodeJs

原生javascript自定义input[type=radio]效果示例

2019/08/27 Javascript

vue-cli3跨域配置的简单方法

2019/09/06 Javascript

微信小程序实现列表滚动头部吸顶的示例代码

2020/07/12 Javascript

[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼

2014/07/07 DOTA

Python 批量合并多个txt文件的实例讲解

2018/05/08 Python

python代码输入数字使其反向输出的方法

2018/12/22 Python

PyCharm 配置远程python解释器和在本地修改服务器代码

2019/07/23 Python

Python表达式的优先级详解

2020/02/18 Python

Python通过正则库爬取淘宝商品信息代码实例

2020/03/02 Python

Python小整数对象池和字符串intern实例解析

2020/03/21 Python

python实现将字符串中的数字提取出来然后求和

2020/04/02 Python

Python+Kepler.gl轻松制作酷炫路径动画的实现示例

2020/06/02 Python

使用python实现时间序列白噪声检验方式

2020/06/03 Python

python基于openpyxl生成excel文件

2020/12/23 Python

美国中西部家用医疗设备商店：Med Mart（轮椅、踏板车、升降机等）

2019/04/26 全球购物

安全的后院和健身蹦床：JumpSport

2019/07/15 全球购物

将时尚融入珠宝：Adornmonde

2019/10/17 全球购物

外语系毕业生找工作的求职信

2013/11/28 职场文书

关于礼仪的演讲稿

2014/01/04 职场文书

教师信息技术学习心得体会

2016/01/21 职场文书

python实现简易名片管理系统

2021/04/11 Python

Java 获取Word中所有的插入和删除修订的方法

2022/04/06 Java/Android