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

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