编程 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在IE和Firefox(火狐)的不兼容问题解决方法小结

Apr 13 Javascript

js打印纸函数代码（递归）

Jun 18 Javascript

JSONP 跨域共享信息

Aug 16 Javascript

你必须知道的Javascript知识点之"单线程事件驱动"的使用

Apr 23 Javascript

JavaSciprt中处理字符串之sup()方法的使用教程

Jun 08 Javascript

javascript实现下班倒计时效果的方法(可桌面通知)

Jul 10 Javascript

JS实现单击输入框弹出选择框效果完整实例

Dec 14 Javascript

详解maxlength属性在textarea里奇怪的表现

Dec 27 Javascript

在AngularJS框架中处理数据建模的方式解析

Mar 05 Javascript

高效利用Angular中内置服务$http、$location等

Mar 22 Javascript

详解vue中使用express+fetch获取本地json文件

Oct 10 Javascript

Vue中在新窗口打开页面及Vue-router的使用

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

通过html表格发电子邮件

2006/10/09 PHP

php 智能404跳转代码,适合换域名没改变目录的网站

2010/06/04 PHP

PHP网页游戏学习之Xnova(ogame)源码解读（五）

2014/06/23 PHP

php将字符串全部转换成大写或者小写的方法

2015/03/17 PHP

利用PHP如何实现Socket服务器

2015/09/23 PHP

用JavaScript页面不刷新时全选择，全删除（GridView）

2009/04/14 Javascript

ExtJs事件机制基本代码模型和流程解析

2010/10/24 Javascript

artDialog双击会关闭对话框的修改过程分享

2013/08/05 Javascript

JavaScript生成福利彩票双色球号码

2015/05/15 Javascript

解决jQuery使用JSONP时产生的错误

2015/12/02 Javascript

Vue组件创建和传值的方法

2018/08/17 Javascript

爬虫利器Puppeteer实战

2019/01/09 Javascript

基于vue实现一个神奇的动态按钮效果

2019/05/15 Javascript

layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法

2019/09/24 Javascript

解决VantUI popup 弹窗不弹出或无蒙层的问题

2020/11/03 Javascript

Python解决鸡兔同笼问题的方法

2014/12/20 Python

Python实现替换文件中指定内容的方法

2018/03/19 Python

PyQt5每天必学之组合框

2018/04/20 Python

python Pandas 读取txt表格的实例

2018/04/29 Python

pycharm远程linux开发和调试代码的方法

2018/07/17 Python

Python使用MyQR制作专属动态彩色二维码功能

2019/06/04 Python

pytorch中tensor.expand()和tensor.expand_as()函数详解

2019/12/27 Python

python 函数嵌套及多函数共同运行知识点讲解

2020/03/03 Python

python实现批处理文件

2020/07/28 Python

SportsDirect.com马来西亚：英国第一体育零售商

2018/11/21 全球购物

哈利波特商店：Harry Potter Shop

2018/11/30 全球购物

阿里巴巴英国：Alibaba英国

2019/12/11 全球购物

叙述DBMS对数据控制功能有哪些

2016/06/12 面试题

毕业生自荐书

2013/12/18 职场文书

迁徙的鸟观后感

2015/06/09 职场文书

爱国影片观后感

2015/06/18 职场文书

生日祝酒词大全

2015/08/10 职场文书

62句有关感恩节文案（推荐收藏）

2019/11/28 职场文书

Python Pandas pandas.read_sql函数实例用法

2021/06/21 Python

PostGIS的安装与入门使用指南

2022/01/18 PostgreSQL

详解如何使用Nginx解决跨域问题

2022/05/06 Servers