编程 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调试工具（下载）

Jan 09 Javascript

ExtJS 2.0实用简明教程之Ext类库简介

Apr 29 Javascript

input 输入框内的输入事件详细分析

Mar 17 Javascript

让AJAX不依赖后端接口实现方案

Dec 03 Javascript

table行随鼠标移动变色示例

May 07 Javascript

了不起的node.js读书笔记之例程分析

Dec 22 Javascript

JS中获取函数调用链所有参数的方法

May 07 Javascript

JavaScript数据操作_浅谈原始值和引用值的操作本质

Aug 23 Javascript

模板视图和AngularJS之间冲突的解决方法

Nov 22 Javascript

JS自定义滚动条效果简单实现代码

Oct 27 Javascript

JS数组操作之增删改查的简单实现

Aug 21 Javascript

Vue组件开发之LeanCloud带图形校验码的短信发送功能

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

php操作JSON格式数据的实现代码

2011/12/24 PHP

基于PHP实现微信小程序客服消息功能

2019/08/12 PHP

laravel withCount 统计关联数量的方法

2019/10/10 PHP

javascript为下拉列表动态添加数据项

2014/05/23 Javascript

JS实现自适应高度表单文本框的方法

2015/02/25 Javascript

JS匹配日期和时间的正则表达式示例

2017/05/12 Javascript

基于vue.js无缝滚动效果

2018/01/25 Javascript

JS正则表达式常见用法实例详解

2018/06/19 Javascript

详解JSON Web Token 入门教程

2018/07/30 Javascript

详解Vue.js和layui日期控件冲突问题解决办法

2019/07/25 Javascript

javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

2020/05/14 Javascript

[02:53]2018年度DOTA2最佳战队-完美盛典

2018/12/17 DOTA

利用Python获取操作系统信息实例

2016/09/02 Python

python 根据pid杀死相应进程的方法

2017/01/16 Python

python添加模块搜索路径方法

2017/09/11 Python

Selenium定时刷新网页的实现代码

2018/10/31 Python

详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决

2019/04/17 Python

python爬虫基于requests模块的get请求实现详解

2019/08/20 Python

Django框架创建项目的方法入门教程

2019/11/04 Python

Python转换itertools.chain对象为数组的方法

2020/02/07 Python

Python安装whl文件过程图解

2020/02/18 Python

python如何对链表操作

2020/10/10 Python

selenium框架中driver.close()和driver.quit()关闭浏览器

2020/12/08 Python

python中PyQuery库用法分享

2021/01/15 Python

10分钟理解CSS3 Grid布局

2018/12/20 HTML / CSS

TripAdvisor德国：全球领先的旅游网站

2017/12/07 全球购物

京东奢侈品：全球奢侈品牌

2018/03/17 全球购物

西班牙多品牌鞋店连锁店：Krack

2018/11/30 全球购物

馥蕾诗美国官网：Fresh美国

2019/10/09 全球购物

大学生简短的自我评价分享

2014/02/20 职场文书

护理人员的自我评价分享

2014/03/15 职场文书

大学生职业生涯十年规划书范文

2014/09/17 职场文书

2016大学生社会实践单位评语

2015/12/01 职场文书

浅谈CSS不规则边框的生成方案

2021/05/25 HTML / CSS

MySQL快速插入一亿测试数据

2021/06/23 MySQL

Java集成swagger文档组件

2021/06/28 Java/Android