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

JSON扫盲帖 JSON.as类教程

Feb 16 Javascript

ajax处理php返回json数据的实例代码

Jan 24 Javascript

解决jquery中美元符号命名冲突问题

Jan 08 Javascript

js获取窗口相对于屏幕左边和上边的位置坐标

May 15 Javascript

教你如何自定义百度分享插件以及bshare分享插件的分享按钮

Jun 20 Javascript

分步解析JavaScript实现tab选项卡自动切换功能

Jan 25 Javascript

JavaScript必看小技巧(必看)

Jun 07 Javascript

AngularJS中$apply方法和$watch方法用法总结

Dec 13 Javascript

通过fastclick源码分析彻底解决tap“点透”

Dec 24 Javascript

详解如何在微信小程序中愉快地使用sass

Jul 30 Javascript

vue+element加入签名效果（移动端可用）

Jun 17 Javascript

js实现随机点名功能

Dec 23 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

Laravel中使用阿里云OSS Composer包分享

2015/02/10 PHP

PHP附件下载中文名称乱码的解决方法

2015/12/17 PHP

360搜索引擎自动收录php改写方案

2018/04/28 PHP

javascript 闭包

2011/09/15 Javascript

JS实现QQ图片一闪一闪的效果小例子

2013/07/31 Javascript

js取消单选按钮选中并判断对象是否为空

2013/11/14 Javascript

JavaScript编程中布尔对象的基本使用

2015/10/25 Javascript

JavaScript学习笔记之检测客户端类型是（引擎、浏览器、平台、操作系统、移动设备）

2015/12/03 Javascript

原生javascript实现addClass,removeClass,hasClass函数

2016/02/25 Javascript

微信小程序去哪里找小程序到底如何使用(附小程序名单)

2017/01/09 Javascript

easyui 中的datagrid跨页勾选问题的实现方法

2017/01/18 Javascript

JavaScript实现精美个性导航栏筋斗云效果

2017/10/29 Javascript

vue轮播图插件vue-awesome-swiper

2017/11/27 Javascript

浅析vue-router jquery和params传参(接收参数)$router $route的区别

2018/08/03 jQuery

JS编写兼容IE6,7,8浏览器无缝自动轮播

2018/10/12 Javascript

layer关闭当前窗口页面以及确认取消按钮的方法

2019/09/09 Javascript

python益智游戏计算汉诺塔问题示例

2014/03/05 Python

Python使用Pycrypto库进行RSA加密的方法详解

2016/06/06 Python

python模块之sys模块和序列化模块(实例讲解)

2017/09/13 Python

用Python实现大文本文件切割的方法

2019/01/12 Python

python队列Queue的详解

2019/05/10 Python

django框架基于queryset和双下划线的跨表查询操作详解

2019/12/11 Python

设置jupyter中DataFrame的显示限制方式

2020/04/12 Python

matplotlib源码解析标题实现(窗口标题，标题，子图标题不同之间的差异)

2021/02/22 Python

美国在线轮胎零售商：SimpleTire

2019/04/08 全球购物

Java面向对象面试题

2016/12/26 面试题

自荐信要包含哪些内容

2013/11/06 职场文书

庆祝教师节活动方案

2014/01/31 职场文书

高一学生评语大全

2014/04/25 职场文书

运动会口号大全

2014/06/07 职场文书

精神文明建设标语

2014/06/16 职场文书

校园环保广播稿（3篇）

2014/09/15 职场文书

2014社会治安综合治理工作总结

2014/12/04 职场文书

旅游项目合作意向书

2015/05/08 职场文书

vue backtop组件的实现完整代码

2021/04/07 Vue.js

css3中2D转换之有趣的transform形变效果

2022/02/24 HTML / CSS