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

页面中body onload 和 window.onload 冲突的问题的解决

Jul 01 Javascript

jQuery的三种$()

Dec 30 Javascript

纯js网页画板(Graphics)类简介及实现代码

Dec 24 Javascript

AngularJS转换响应内容

Jan 27 Javascript

Angularjs material 实现搜索框功能

Mar 08 Javascript

详解JavaScript中this关键字的用法

May 26 Javascript

ECMAScript6轮播图实践知识总结

Aug 17 Javascript

jQuery实现用户信息表格的添加和删除功能

Sep 12 jQuery

Angular Renderer (渲染器)的具体使用

May 03 Javascript

JavaScript中的一些实用小技巧总结

Apr 07 Javascript

layui--js控制switch的切换方法

Sep 03 Javascript

如何在Vue项目中添加接口监听遮罩

Jan 25 Vue.js

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缩略图生成程式(需要GD库支持)

2007/03/06 PHP

php中大括号作用介绍

2012/03/22 PHP

浅析php插件 HTMLPurifier HTML解析器

2013/07/01 PHP

php查找指定目录下指定大小文件的方法

2014/11/28 PHP

php的闭包（Closure）匿名函数详解

2015/02/22 PHP

浅谈php错误提示及查错方法

2015/07/14 PHP

Smarty使用自定义资源的方法

2015/08/08 PHP

浅析php如何实现App常用的秒发功能

2016/08/03 PHP

thinkPHP中volist标签用法示例

2016/12/06 PHP

PHP简单读取xml文件的方法示例

2017/04/20 PHP

JavaScript For Beginners(转载)

2007/01/05 Javascript

jquery一句话全选/取消全选

2011/03/01 Javascript

js去除输入框中所有的空格和禁止输入空格的方法

2014/06/09 Javascript

js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

2016/05/25 Javascript

AngularJS中$http的交互问题

2017/03/29 Javascript

Ajax高级笔记 JavaScript高级程序设计笔记

2017/06/22 Javascript

Node.js实现文件上传的示例

2017/06/28 Javascript

详解vue 模版组件的三种用法

2017/07/21 Javascript

关于vue中 $emit的用法详解

2018/04/12 Javascript

Bootstrap-table使用footerFormatter做统计列功能

2018/09/07 Javascript

ES6中异步对象Promise用法详解

2019/07/31 Javascript

解决antd的Form组件setFieldsValue的警告问题

2020/10/29 Javascript

[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪？

2015/07/31 DOTA

python编程开发之日期操作实例分析

2015/11/13 Python

pycharm新建一个python工程步骤

2019/07/16 Python

python自动结束mysql慢查询会话的实例代码

2019/10/27 Python

Python实例方法、类方法、静态方法区别详解

2020/09/05 Python

HTML5新表单元素_动力节点Java学院整理

2017/07/12 HTML / CSS

Michael Kors英国官网：美国奢侈品品牌

2019/11/13 全球购物

2014年清明节寄语

2014/04/03 职场文书

四风自我剖析材料思想汇报

2014/10/01 职场文书

全国助残日活动总结

2015/05/11 职场文书

人间正道是沧桑观后感

2015/06/15 职场文书

迎新年主持词

2015/07/06 职场文书

体育委员竞选稿

2015/11/21 职场文书

SpringBoot详解整合Redis缓存方法

2022/07/15 Java/Android