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

最新推荐文章于 2024-04-03 13:39:00 发布
最新推荐文章于 2024-04-03 13:39:00 发布
阅读量7.8k 收藏 1
点赞数 2
分类专栏： vue2.0 文章标签： vue2.0 webpack 微软雅黑 常见问题 填坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wojiaomaxiaoqi/article/details/78040232
版权

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

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

但使用webpack打包以后，"微软雅黑"

最低0.47元/天 解锁文章
若晨工作室
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决在vue项目中webpack打包后字体不生效的问题
01-19
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图： 打开控制台查看元素样式，发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号， 但使用webpack打包以后，”微软雅黑”的双引号被错误解析并多加了个反斜杠，导致字体不生效。 解决方法： 尝试了一下去掉双引号，也就是font-family:微软雅黑，这样浏览器并不会把中文字体用unicode编码，样式也可以正常显示。但为了更好的兼容性，这里作者推荐使用中文字体的英文编码，如：font-family:’Microsoft YaHei’。 附上几个中文字体的英文对照
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
10-14
主要介绍了vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue项目中引入外部字体文件
最新发布
蓝胖子的博客
04-03 867
Vue项目中引入外部字体文件
使用Webpack打包vue-cli的项目后,字体图标等失效的解决办法
qq_41557320的博客
03-29 1385
找到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 1140
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图：打开控制台查看元素样式，发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号，但使用webpack打包以后，"微软雅黑"的双引号被错误解析并多加了个反斜杠，导致字体不生效。解决方法：尝试了一下去掉双引号，也就是font-family:微软雅黑，这样浏览器并不会把中文字体用u...
vue解决使用webpack打包后keep-alive不生效的方法
01-21
问题是这样的，我使用webpack的npm run dev运行的时候，keep-alive路由缓存是有效的，但是我npm run build，把文件放到实际的项目中去的时候，会有如下的问题： 路由如下： var menus = [ { path: '/user', name...
使用webpack打包后的vue项目如何正确运行（express）
10-17
在现代前端开发中，Webpack 是一个非常重要的模块打包工具，它可以将 Vue.js 项目中的各种资源文件（如 JavaScript、CSS、图片等）进行编译、优化，并打包成可部署的静态资源。Vue 项目经过 Webpack 打包后，通常会...
webpack 设置字体 不生效
锦锦_jane的博客
06-16 572
跟着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 1769
vue2.0 + webpack做项目时，css3动画打包前正常，打包后失效，原因是： vue-cli脚手架package.json配置文件里面对浏览器的版本做了css的前缀处理 "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] 意思是 只兼容主流浏览器的最新两个版本。如果我们要兼容所...
前端项目如何引入字体包? 引入字体包不起效果？
前端攻城狮
07-30 1万+
因为设计师用的是IMac电脑，设计图默认使用的字体为 pingFangSC-Regular，这就需要我们做开发的 引入苹方字体包 以达到和设计图一致的视觉效果，（引入其他字体包 同理） 先上个苹方字体包下载链接： https://pan.baidu.com/s/1xI4A7MO3u-P2qQbvS8pu0w 提取码：gqwi 首先先演示下如何引入字体包 1、下载好字体包之后，在项目中新...
Webpack4 url-loader 字体图标变为方框，图标文件未加载
japlus的博客
10-09 835
依赖摘要： 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
字体文件只有本地服务器,解决字体文件Font跨域权限问题
weixin_31316383的博客
08-13 334
问题描述：Font from origin 'http://trunk.supply_chain.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resourc...
note7：font字体在开发环境正常，其他环境不显示
weixin_44960008的博客
01-25 132
font字体
vue中替换全局字体
z750467878的博客
10-08 3706
替换成可商用的字体
全局vue中修改字体样式 苹方字体 微软雅黑 亲测可用
热门推荐
qq_25007459的专栏
10-31 2万+
1、下载所需要的字体，.ttf格式本文以（PingFang.ttf 为例） 底下将会附加苹果方体-简易黑体PINGFANG MEDIUM.tff 可自行下载其他字体样式，全局引用，方便快捷。 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'PingFang'; //重命名字体名 s...
【超详细】vue项目：Tinymce富文本使用教程以及踩坑总结+业务需要功能扩展
weixin_55846296的博客
12-01 1万+
在Vue项目的开发过程中，经常需要使用富文本编辑器来处理用户的输入内容。 是一个功能强大且易于使用的富文本编辑器，它支持大多数常见的文本编辑功能，并且可以通过插件进行扩展。本文将详细介绍如何在Vue项目中使用Tinymce富文本编辑器
vue2.0使用ttf字体不生效
fumei13145的博客
11-08 1540
vue2.0使用.ttf字体不生效
vue全局字体不生效的问题
浮游的博客
07-26 1191
今天接手了一个新项目，在熟悉项目的时候，意外发现，网站的字体和设计稿上的字体不一样。虽然只是一个小问题，但这种问题其实很常见，记录下来，以后翻看~于是查看一番之后，发现引入字体的方式错了。问题出在，没有引入字体。
vue项目打包 webpack
05-25
Vue.js 是一个前端框架，它使用 Webpack 作为默认的构建工具，可以将你的项目打包成一个发布的文件。 以下是打包 Vue 项目的基本步骤： 1. 安装依赖 使用 npm 或者 yarn 安装项目依赖，包括 Vue.js 和 webpack ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值