编程 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判断浏览器的比较全的代码

Feb 13 Javascript

php上传图片并给图片打上透明水印的代码

Jun 07 Javascript

javascript测试题练习代码

Oct 10 Javascript

js异步加载的三种解决方案

Mar 04 Javascript

javascript中一些util方法汇总

Jun 10 Javascript

原生JS实现简单放大镜效果

Feb 08 Javascript

微信小程序左右滑动切换页面详解及实例代码

Feb 28 Javascript

详解用webpack2搭建angular2的项目

Jun 22 Javascript

bootstrap confirmation按钮提示组件使用详解

Aug 22 Javascript

仿京东快报向上滚动的实例

Dec 13 Javascript

JS数组求和的常用方法总结【5种方法】

Jan 14 Javascript

17道题让你彻底理解JS中的类型转换

Aug 08 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

解析PHP留言本模块主要功能的函数说明(代码可实现)

2013/06/25 PHP

php 输出json及显示json中的中文汉字详解及实例

2016/11/09 PHP

详解ThinkPHP3.2.3验证码显示、刷新、校验

2016/12/29 PHP

老生常谈文本文件和二进制文件的区别

2017/02/27 PHP

ajax+php实现无刷新验证手机号的实例

2017/12/22 PHP

php array 转json及java 转换 json数据格式操作示例

2019/11/13 PHP

JS获取下拉框显示值和判断单选按钮的方法

2015/07/09 Javascript

纯javascript实现图片延时加载方法

2015/08/21 Javascript

js带闹铃功能的倒计时代码

2016/09/29 Javascript

node.js利用redis数据库缓存数据的方法

2017/03/01 Javascript

Javascript调试之console对象——你不知道的一些小技巧

2017/07/10 Javascript

js匿名函数使用&传参(实例)

2017/09/08 Javascript

微信小程序开发之好友列表字母列表跳转对应位置

2017/09/26 Javascript

vue.js 实现图片本地预览裁剪压缩上传功能

2018/03/01 Javascript

elementUI Tree 树形控件的官方使用文档

2019/04/25 Javascript

js实现时钟定时器

2020/03/26 Javascript

[34:08]2018DOTA2亚洲邀请赛3月29日小组赛B组 VP VS EG

2018/03/30 DOTA

[49:15]DOTA2-DPC中国联赛正赛 CDEC vs XG BO3 第二场 1月19日

2021/03/11 DOTA

Python中针对函数处理的特殊方法

2014/03/06 Python

Python实现简单的可逆加密程序实例

2015/03/05 Python

Python实现在线程里运行scrapy的方法

2015/04/07 Python

浅谈python中截取字符函数strip，lstrip，rstrip

2015/07/17 Python

python实现requests发送/上传多个文件的示例

2018/06/04 Python

django mysql数据库及图片上传接口详解

2019/07/18 Python

python画蝴蝶曲线图的实例

2019/11/21 Python

Python CategoricalDtype自定义排序实现原理解析

2020/09/11 Python

Numpy实现卷积神经网络(CNN)的示例

2020/10/09 Python

python正则表达式re.match()匹配多个字符方法的实现

2021/01/27 Python

HTML5标签与HTML4标签的区别示例介绍

2013/07/18 HTML / CSS

香港时装购物网站：ZALORA香港

2017/04/23 全球购物

当当网官方旗舰店：中国图书销售夺金品牌

2018/04/02 全球购物

《忆江南》教学反思

2014/04/07 职场文书

合作意向书

2014/07/30 职场文书

竞选班干部演讲稿100字

2014/08/20 职场文书

高校教师个人总结

2015/02/10 职场文书

2015年房产经纪人工作总结

2015/05/15 职场文书