vue打包后,font格式错误

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本地测试没有问题,项目打包以后,浏览器打开控制台,提示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
### 解决 Vue 项目中 Element 图标在生产环境中不显示的问题 当遇到 **Vue** 和 **Element-UI** 的图标在生产构建环境下无法正常加载的情况时,通常是因为字体文件未被正确打包到最终的静态资源目录中。以下是可能的原因分析及解决方案: #### 原因分析 1. 生产环境下的路径配置错误可能导致字体文件未能正确加载。 2. Webpack 配置中的 `file-loader` 或其他相关 loader 可能未正确处理 `.woff`, `.ttf`, `.eot` 等字体文件[^1]。 --- #### 解决方案 ##### 方法一:调整 Webpack 配置以支持字体文件 如果使用的是自定义 Webpack 配置,则需确保其能够正确解析并打包字体文件。可以在项目的 `webpack.config.js` 文件中添加如下规则: ```javascript module.exports = { module: { rules: [ { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] } ] } }; ``` 此规则会通过 `file-loader` 将字体文件复制到输出目录中。 ##### 方法二:修改 CSS 资源路径 某些情况下,CSS 中引用的字体文件路径可能是相对路径,在开发模式下可以正常工作,但在生产模式下可能会失效。可以通过设置绝对路径来解决问题。例如,编辑 `element-ui` 的样式文件或覆盖默认路径: ```css @font-face { font-family: 'element-icons'; src: url('/fonts/element-icons.eot'); /* 添加更多字体格式 */ } ``` 注意这里的 `/fonts/` 是相对于根路径的地址,应根据实际部署结构调整。 ##### 方法三:检查公共路径 (`publicPath`) 如果使用了 Vue CLI 构建工具,默认会在生产环境中生成带有子路径的公共资源链接。这可能导致字体文件的实际位置与预期不符。可通过修改 `vue.config.js` 来指定正确的 `publicPath`: ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-sub-path/' : '/' }; ``` 上述代码片段设置了不同环境下的基础路径,从而避免路径冲突问题。 ##### 方法四:手动引入字体文件 作为最后手段,可以直接将所需的字体文件下载至本地,并显式导入它们。例如,将 `element-icons.ttf` 放入 `src/assets/fonts/` 目录下,然后在入口文件中执行以下操作: ```javascript import '@/assets/fonts/element-icons.ttf' ``` 这种方法虽然简单粗暴,但适用于快速修复场景。 --- ### 示例代码 假设已按照方法一完成 Webpack 配置更新,那么完整的组件实现可参考以下形式: ```html <template> <div class="icon-example"> <i class="el-icon-setting"></i> <!-- 正确渲染 --> </div> </template> <script> export default { name: 'IconExample', }; </script> <style scoped> .icon-example i { font-size: 24px; color: #409eff; } </style> ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值