vue打包后,font格式错误

本文介绍了解决Vue项目在打包后遇到的字体样式显示错误问题,提供了包括修改CSS书写方式、使用英文字体名及调整Webpack配置等四种解决方案。

本地测试没有问题,项目打包以后,浏览器打开控制台,提示font格式错误:
在这里插入图片描述
把我的双引号给去掉了。。。-^- 不开心。

解决办法:

1. 把 font: 字体粗细 字体大小/行高 "字体样式"; 分开来写。
改成: font-size:字体大小;font-family:字体样式line-height:行高等,分开来写。

2. 把字体样式改成英文。(参考-张鑫旭
在这里插入图片描述
像这样的情况,打包后会把中文转成Unicode编码,造成font 格式错误。
在这里插入图片描述
这种情况,把 “微软雅黑” 改成 "Microsoft Yahei"就好了。这里是字体英文对照表

3. 如果部分样式没生效,也可能是被 element 的样式覆盖了参考-Arlisor)。

import Vue from 'vue'
import App from './App'
//先引入第三方组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//后引入router
import router from './router'
import store from './vuex/store'

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

4. 对于 vue-cli2,html 中 css 路径的双引号都没有了,可以去 webpack.prod.conf.js 中进行配置参考-拾钱运

//默认true,改成false
removeAttributeQuotes:false;//默认false
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值