在vue项目中webpack打包后字体不生效

最新推荐文章于 2025-06-25 15:35:15 发布
最新推荐文章于 2025-06-25 15:35:15 发布
阅读量8k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： vue2.0 文章标签： vue2.0 webpack 微软雅黑 常见问题 填坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wojiaomaxiaoqi/article/details/78040232
在Vue2.0项目中，开发者发现Webpack打包后的字体样式在生产环境中不生效，主要原因是字体名称在打包后被错误解析。解决办法是使用中文字体的英文编码，例如将'微软雅黑'改为'Microsoft YaHei'，以确保兼容性和样式正确显示。文章还列举了其他常用中文字体的英文对照。

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

最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图：

打开控制台查看元素样式，发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号，

但使用webpack打包以后，"微软雅黑"的双引号被错误解析并多加了个反斜杠，导致字体不生效。

最低0.47元/天 解锁文章

200万优质内容无限畅学
vue-cli2项目webpack3 和webpack4环境中：Element-UI在vue项目中，打包build后字体、图标丢失（亲测可解决）
happy81997的博客
11-15 2143
Element-UI在vue项目中，打包build后字体、图标丢失 应用场景： F12报错提示： 问题原因： （1）查看/build/webpack.base.conf.js文件可以发现，woff或ttf这些字体会经由url-loader处理后在static/fonts目录下生成相应的文件。 （2）也就是说实际应该通过/static/fonts/**...
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
10-14
主要介绍了vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决在vue项目中webpack打包后字体不生效的问题
01-19
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图： 打开控制台查看元素样式，发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号， 但使用webpack打包以后，”微软雅黑”的双引号被错误解析并多加了个反斜杠，导致字体不生效。 解决方法： 尝试了一下去掉双引号，也就是font-family:微软雅黑，这样浏览器并不会把中文字体用unicode编码，样式也可以正常显示。但为了更好的兼容性，这里作者推荐使用中文字体的英文编码，如：font-family:’Microsoft YaHei’。 附上几个中文字体的英文对照
Vue中引入外部字体并使用
最新发布
nunumaymax的博客
06-25 1228
1.下载需要引入的字体包；2.创建一个新的资源目录 font 文件夹，将需要的字体放在该目录下并创建一个font.css；3.在 font.css 文件中引入想要的字体；4.在项目中全局引入写好的 font.css 文件；5.那么现在就可以在 vue 组件中随意使用引入的字体样式啦！
使用Webpack打包vue-cli的项目后,字体图标等失效的解决办法
qq_41557320的博客
03-29 1497
找到build文件夹中的这个文件：build/webpack.prod.conf.js module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: false, usePostCSS: true }) }, 将extr...
vue 不生效 打包 样式_解决在vue项目中webpack打包后字体不生效的问题
weixin_29288313的博客
01-13 1285
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图：打开控制台查看元素样式，发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号，但使用webpack打包以后，"微软雅黑"的双引号被错误解析并多加了个反斜杠，导致字体不生效。解决方法：尝试了一下去掉双引号，也就是font-family:微软雅黑，这样浏览器并不会把中文字体用u...
Vue中引入字体失效 .ttf
2301_77708638的博客
02-29 1539
1. 把字体格式 .ttf转为 .woff 就可以用了 下面是一个转换器。2.因为无法解析.ttf文件 需要额外配置解析文件，还有事，弄完再配。解决：默认正常操作导入字体文件没问题。引入字体失效 .ttf格式。
vue全局字体不生效的问题
浮游的博客
07-26 1707
今天接手了一个新项目，在熟悉项目的时候，意外发现，网站的字体和设计稿上的字体不一样。虽然只是一个小问题，但这种问题其实很常见，记录下来，以后翻看~于是查看一番之后，发现引入字体的方式错了。问题出在，没有引入字体。
vue2.*+elementUi2.15.*打包后找不到字体和图标库的解决方法
lifachang的博客
02-25 717
vue2.*+elementUi2.15.*打包后找不到字体和图标库的解决方法
webpack 设置字体 不生效
锦锦_jane的博客
06-16 702
跟着webpack官方文档学习，在【加载 fonts 字体】 这一板块遇到了问题，就是加载的字体不生效 1.项目代码 项目结构 webpack-demo |- package.json |- webpack.config.js |- /dist |- bundle.js |- index.html |- /src |- MontserratAlternates-Regular.otf |- icon.png |- style.css .
vue2.0项目CSS3动画打包后动画失效解决办法
chi1130的博客
11-11 1838
vue2.0 + webpack做项目时，css3动画打包前正常，打包后失效，原因是： vue-cli脚手架package.json配置文件里面对浏览器的版本做了css的前缀处理 "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] 意思是 只兼容主流浏览器的最新两个版本。如果我们要兼容所...
vue中引入字体资源遇到的问题
weixin_44528408的博客
04-29 733
"@"是jsconfig.json/tsconfig.json配置的资源路径。"~"是webpack中css-loader提供的导入资源语法。这种写法能加载字体，但是无法应用字体。这种写法会报错，甚至无法通过编译。这种写法可以加载并应用字体。
Vue3——压缩字体font-spider，完美解决字体压缩后会出现字体消失现象
NanChen的博客
09-21 6005
打包出现字体文件过大怎么办？压缩字体后出现问题怎么办？来看这篇文章哦~
vue打包字体路径错误
guoscy的博客
01-29 5709
1.使用vue-cli构建项目打包后字体引用路径不对 打包之前的文件目录： 打包之后的文件目录： dist ├── index.html └── static     ├── fonts    ├── css     ├── img     └── js 使用 vue build 之后做网站请求，发现 woff 字体无法获取，调试发现： 真实路径应该是 xxx
前端项目如何引入字体包? 引入字体包不起效果？
热门推荐
前端攻城狮
07-30 1万+
因为设计师用的是IMac电脑，设计图默认使用的字体为 pingFangSC-Regular，这就需要我们做开发的 引入苹方字体包 以达到和设计图一致的视觉效果，（引入其他字体包 同理） 先上个苹方字体包下载链接： https://pan.baidu.com/s/1xI4A7MO3u-P2qQbvS8pu0w 提取码：gqwi 首先先演示下如何引入字体包 1、下载好字体包之后，在项目中新...
vue项目配置测试环境打包后报错
lonsole的博客
12-13 928
将 webpack.prod.conf.js 文件中的 ouput下的 path：config.build.assetsRoot 改为 publicPath: './ ![在这里插入图片描述](https://img-blog.csdnimg.cn/b626439cce634fc588df490799f043ae.png 打包后iconfont文件路径解决
Webpack4 url-loader 字体图标变为方框，图标文件未加载
japlus的博客
10-09 962
依赖摘要： webpack@4.44.2 webpack-cli@3.1.0 webpack-dev-server@3.1.5 vue-loader@14.2.2 vue-style-loader@4.1.2 vue-template-compiler@2.5.17 css-loader@0.28.11 style-loader@1.2.1 file-loader@1.1.6 url-loader@0.6.2 url-loader是依赖于file-loader的，使用url-loader
vue打包后本地字体不生效
08-09
在使用 Vue 打包后，本地字体没有生效可能有以下几个原因： ...综上所述，排查和解决 Vue 打包后本地字体不生效的问题，需要检查路径、文件类型、Webpack 配置和缓存等方面，确保字体文件的引用和加载的正确性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值