编程 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 相关文章推荐

如何在Mozilla Gecko 用Javascript加载XSL

Jan 09 Javascript

优秀js开源框架-jQuery使用手册(1)

Mar 10 Javascript

jMessageBox 基于jQuery的窗口插件

Dec 09 Javascript

jquery 关键字“拖曳搜索”之“拖曳”以及图片“提示自适应放大”效果的实现

Apr 18 Javascript

拥抱模块化的JavaScript

Mar 07 Javascript

JSCode all of Brower 全局屏蔽网页右键功能具体实现

Jun 05 Javascript

javascript删除一个html元素节点的方法

Dec 20 Javascript

如何使用AngularJs打造权限管理系统【简易型】

May 09 Javascript

完美解决input[type=number]无法显示非数字字符的问题

Feb 28 Javascript

BootStrap下的弹出框加载select2框架失败的解决方法

Aug 31 Javascript

Bootstrap实现模态框效果

Sep 30 Javascript

JS一次前端面试经历记录

Mar 19 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

支持oicq头像的留言簿(一)

2006/10/09 PHP

怎样去阅读一份php源代码

2009/08/21 PHP

php ActiveMQ的安装与使用方法图文教程

2020/02/23 PHP

JS如何判断移动端访问设备并解析对应CSS

2013/11/27 Javascript

jquery+html5时钟特效代码分享（可设置闹钟并且语音提醒）

2020/03/30 Javascript

js验证真实姓名与身份证号是否匹配

2015/10/13 Javascript

touch.js 拖动、缩放、旋转（鼠标手势）功能代码

2017/02/04 Javascript

浅谈js停止事件冒泡阻止浏览器的默认行为(阻止超连接 #)

2017/02/08 Javascript

javascript基础知识之html5轮播图实例讲解（44）

2017/02/17 Javascript

angular6.0使用教程之父组件通过url传递id给子组件的方法

2018/06/30 Javascript

LayerClose弹窗关闭刷新方法

2018/08/17 Javascript

Vue2 监听属性改变watch的实例代码

2018/08/27 Javascript

vue directive定义全局和局部指令及指令简写

2018/11/20 Javascript

JS实现的tab切换并显示相应内容模块功能示例

2019/08/03 Javascript

Layui事件监听的实现(表单和数据表格)

2019/10/17 Javascript

flexible.js实现移动端rem适配方案

2020/04/07 Javascript

[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE

2014/05/22 DOTA

浅谈Python的Django框架中的缓存控制

2015/07/24 Python

python中装饰器级连的使用方法示例

2017/09/29 Python

python下载文件记录黑名单的实现代码

2017/10/24 Python

解决tensorflow测试模型时NotFoundError错误的问题

2018/07/26 Python

pyqt5的QWebEngineView 使用模板的方法

2018/08/18 Python

opencv python 图像去噪的实现方法

2018/08/31 Python

使用python对文件中的单词进行提取的方法示例

2018/12/21 Python

使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法

2014/04/03 HTML / CSS

德国最大的婴儿用品网上商店：Kidsroom.de（支持中文）

2020/09/02 全球购物

广州某公司软件工程师面试题

2014/12/22 面试题

护理专业个人求职简历的自我评价

2013/10/13 职场文书

内科护士实习自我鉴定

2013/10/17 职场文书

小区门卫岗位职责

2013/12/31 职场文书

运动会广播稿200米

2014/01/27 职场文书

社区居务公开实施方案

2014/03/27 职场文书

初中学生评语大全

2014/04/24 职场文书

残疾人小组计划书

2014/04/27 职场文书

沙滩主题婚礼活动策划方案

2014/09/15 职场文书

2015届本科毕业生自我鉴定

2014/09/27 职场文书