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

小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能

Nov 30 Javascript

js+css在交互上的应用

Jul 18 Javascript

Jquery操作radio的简单实例

Jan 06 Javascript

JS中自定义定时器让它在某一时刻执行

Sep 02 Javascript

AngularJS初始化过程分析(引导程序)

Dec 06 Javascript

JavaScript中解析JSON数据的三种方法

Jul 03 Javascript

jquery validate和jquery form 插件组合实现验证表单后AJAX提交

Aug 26 Javascript

vue.js响应式原理解析与实现

Jun 22 Javascript

vue-cli3 从搭建到优化的详细步骤

Jan 20 Javascript

使用pkg打包ThinkJS项目的方法步骤

Dec 30 Javascript

vue+canvas实现拼图小游戏

Sep 18 Javascript

vue实现拖拽交换位置

Apr 07 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

全国FM电台频率大全 - 1 北京市

2020/03/11 无线电

php数组的一些常见操作汇总

2011/07/17 PHP

PHP设计模式之责任链模式的深入解析

2013/06/13 PHP

php导出CSV抽象类实例

2014/09/24 PHP

php的sso单点登录实现方法

2015/01/08 PHP

php web环境和命令行环境下查找php.ini的位置

2019/07/17 PHP

在phpstudy集成环境下的nginx服务器下配置url重写

2019/12/02 PHP

ECMAScript 基础知识

2007/06/29 Javascript

Js 中debug方式

2010/02/07 Javascript

jQuery Tips 为AJAX回调函数传递额外参数的方法

2010/12/28 Javascript

Js放到HTML文件中的哪个位置有什么区别

2013/08/21 Javascript

jquery live()调用不存在的解决方法

2014/02/26 Javascript

nodejs爬虫抓取数据之编码问题

2015/07/03 NodeJs

php利用curl获取远程图片实现方法

2015/10/26 Javascript

vue checkbox 全选数据的绑定及获取和计算方法

2018/02/09 Javascript

swiper 自动图片无限轮播实现代码

2018/05/21 Javascript

使用electron实现百度网盘悬浮窗口功能的示例代码

2018/10/24 Javascript

JavaScript实现放大镜效果代码示例

2020/04/29 Javascript

vue axios封装httpjs,接口公用配置拦截操作

2020/08/11 Javascript

跟老齐学Python之Python安装

2014/09/12 Python

Python将xml和xsl转换为html的方法

2015/03/10 Python

Pyhthon中使用compileall模块编译源文件为pyc文件

2015/04/28 Python

python妹子图简单爬虫实例

2015/07/07 Python

Python爬虫之xlml解析库(全面了解)

2017/08/08 Python

pandas通过索引进行排序的示例

2018/11/16 Python

python爬虫中多线程的使用详解

2019/09/23 Python

python二进制读写及特殊码同步实现详解

2019/10/11 Python

python中的socket实现ftp客户端和服务器收发文件及md5加密文件

2020/04/01 Python

Python正则表达式高级使用方法汇总

2020/06/18 Python

编辑个人求职信范文

2013/09/21 职场文书

施工安全员岗位职责

2015/04/11 职场文书

经费申请报告

2015/05/15 职场文书

初中开学典礼新闻稿

2015/07/17 职场文书

2016年寒假学习心得体会

2015/10/09 职场文书

《迟到》教学反思

2016/02/24 职场文书

Python django中如何使用restful框架

2021/06/23 Python