使用字蛛压缩字体后在vue组件中使用无效，在控制台发现转换为base64文件了，而且还是 0kb显示，跪求大神破解

最新推荐文章于 2024-06-20 17:19:31 发布
最新推荐文章于 2024-06-20 17:19:31 发布
阅读量1.2k 收藏
点赞数
文章标签： 前端 vue 字蛛
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wejh233333/article/details/88714428
版权

使用字蛛压缩字体后在vue组件中使用无效，在控制台发现转换为base64文件了，而且还是 0kb显示，跪求大神破解

在vue组件样式中引用压缩后的字体，发现没有效果，在netWork中看到字体被转为base64格式了，直接引用没有被压缩的是可以使用的，但是字体文件太大了，不在vue组件中，另创一个html文件使用压缩字体是没有问题的。

下面这张是在vue组件中的字体加载：
在这里插入图片描述
这张是直接在html中使用的字体：
在这里插入图片描述

二今哥哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
用字蛛（font-spider）压缩字体，字体大小不变问题。
weixin_45819746的博客
10-13 1862
用字蛛（font-spider）压缩字体1.安装nodejs和npm扩展2. 安装font-spider3.建一个font.css4.再建立一个font.html5.然后开始压缩字体（其实就是把用到的文字挑出来） 1.安装nodejs和npm扩展 请参照https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html 下载路径https://nodejs.org/en/download/ 安装的时候选择add to PATH 这样node n
字蛛-字体压缩模板-vite+vue3+ts
08-05
【标题】"字蛛-字体压缩模板-vite+vue3+ts" 是一个基于Vite、Vue3和TypeScript构建的字体压缩项目模板。这个模板旨在帮助开发者快速搭建一个优化了字体资源处理的前端应用，确保在开发过程中字体文件能够高效、精简...
小程序中用font-spider压缩字体后，字体没效果（解决办法）
最新发布
qcg14774125的博客
06-20 420
但是小程序是有大小限制的，所以必须要压缩字体大小，这时候有些人就说了，那把字体放在服务器上，请求它就完了呀，拜托，字体大的话，请求不花时间吗，会造成页面初始化的时候，字体没请求出来，或者请求完成后由初始化字体转换成需要的字体闪烁，体验感不佳，这时候就要用font-spider，接下来我就把思路讲一下、但是要注意的是，如果你在小程序中要用这个字体包时，你要改变的文字，必须是在demo中出现的文字，不然的话，在小程序中是没有变化的，像我demo中有。然后把你压缩完的字体文件复制到你小程序中去引入就ok了。
background图片不显示_vue组件内部动态渲染src，图片不显示的解决办法
weixin_39562185的博客
11-25 674
最近再做一个图片展示组件时候，发现在vue组件内部动态宣传src尽然图片显示不出来，百度一下，有很多解决办法，什么通过require加载呀，转为base64什么的，在我看来，统统都是很烂的解决办法，图片动态渲染不出来，那么我们就预先加载不就可以了吗？上代码：template:'',data: function () { return { fileList: [{...
vue 项目引入字体图标报错、不显示等问题
热门推荐
mxf_bear的博客
05-30 2万+
问题：在项目开发时使用字体图标，发现两个问题；1、出现报错：解决方法为：把字体引入方式改为绝对路径2、不报错，但是不显示图标字体，出现方框原因可能有两种：①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件①的解决办法是在用到的地方引入字体的样式文件（全局引入的话需要从app.vue里引入）②这个就是我遇到的问题，浪费了我好几分钟！！！记得在用到图标的地方引入问题原理后续再写...
vue base64图片不显示_技巧 | word中插入的图片显示不完整怎么办？
weixin_39942451的博客
12-12 640
已经好久没有更新了，都快忘记有这个公众号存在了~这几个月发生了很多事情，工作上的任务也迟迟没有减轻，之前保持的日记也已经很久没有写了。但是觉得要是没有什么用什么方式将脑袋中时不时飘过的念头记录下来的话，过段时间就会完全想不起来了，再遇到同样的情境可能完全忘记自己曾经遇到过，所以我还是决定在此将一些技巧记录下来。好，开始~日常跟word文档打交道的小伙伴，一定会遇到各种各样让人头疼的各种问...
字体压缩：font-spider
Miss_Y0的博客
11-15 391
后续可以把.font-spider 文件夹以及临时新建的 index.html 文件删除，在样式文件中直接引入使用。命令执行完成后会看到新增了一个 .font-spider 文件夹，这里边保存的是源字体包文件，而外边的是压缩后的。
在vue中使用Base64转码的案例
10-14
这里展示了如何在Vue组件中使用`Base64.encode`进行编码和`Base64.decode`进行解码的方法。如果你需要在多个组件中复用这些方法，可以考虑在`main.js`中全局注册这些方法，这样在任何组件中都可以直接调用。 除了...
Laravel 如何在blade文件中使用Vue组件的示例代码
10-15
4. **在Blade模板中使用Vue组件**：在Blade模板文件中，可以通过`***ponent()`函数引入Vue组件，并在具有`id="app"`的根节点下使用该组件。 5. **资源文件的链接**：确保在Blade模板中链接了由`mix`函数生成的编译...
解决在vue项目中webpack打包后字体不生效的问题
10-18
这个问题通常表现为在开发环境中正常显示的字体，在经过Webpack打包后在生产环境中无法正常渲染。 出现这种问题的原因在于Webpack在处理CSS时，可能会对字符串进行转义，尤其是当使用中文字符作为字体名称时。例如...
在vue项目如何使用base64加密.docx
06-14
安装完成后，在项目的入口文件`main.js`中引入`js-base64`库，并使用Vue插件机制将其注册到Vue实例上，以便在整个应用范围内可以轻松地访问Base64相关的功能。 ```javascript import Base64 from 'js-base64'; Vue....
字蛛的用法以及遇到的问题
weixin_42333548的博客
12-20 2151
字蛛是一个中文字体压缩器，可以压缩字体文件，从而解决加载缓慢的问题。字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。 字蛛官网网址为:http://font-spider.org/ 接下来说一下具体的使用方法： 一、首先安装font-spider npm install font-sp...
vue项目出现替换图片出现404的错误
hailangtuteng的博客
07-10 989
最近接手了一个项目需要替换logo图标、UI设计好新的图片放进项目中出现localhost:999/images/login-logo.png找不到的错误 通过各种写法 require 、 important 发现都没有用结果打印图片发现是一串地址、打印以前的图片是base64位编码 结果通过看base64位相关文章和看代码发现对图片的大小做了限制 不能比以前的图片尺寸大太多 否则会出现找...
（字蛛） gulp-font-spider 压缩中文字体遇到的坑
weixin_30687811的博客
08-16 683
1、安装插件的时候npm要低于5.0版本，否则装不上 2、安装Python的2.X系列版本 来兼容插件 3、压缩字体的时候不要有英文和空格 4、自定义字体名称的时候不要和系统或者已有的字体名称有命名冲突 转载于:https://www.cnblogs.com/yanliangnh/p/7373584.html...
html文字标签压缩,tool 使用font-spider解决字体压缩问题
weixin_39705065的博客
06-20 218
开发页面时经常需要使用特殊字体，一个.ttf文件动则几M,字体文件需要优化http://font-spider.org/安装好node环境后1.全局安装font-spidernpm install font-spider -g2.如果字体不全是写在html中的,那么写个文件用于生成字体*.ttf文件必须有，其他格式的程序将自动生成1) getFont.html文件document@font-fac...
Vue3——压缩字体font-spider，完美解决字体压缩后会出现字体消失现象
NanChen的博客
09-21 5338
打包出现字体文件过大怎么办？压缩字体后出现问题怎么办？来看这篇文章哦~
字蛛（font-spider）教学——ttf/otf字体文件压缩
林啾啾的博客
06-07 6017
win+R打开cmd命令窗口，全局安装font-spider： 查看版本号，查看自己安装是否成功： 第二步、准备好文件夹 在项目外的地方准备一个空文件夹，空文件夹里放进一个html文件（或一个html文件和一个css文件），和完整字体文件 文件目录结构如下： 或 css部分可以写在css文件中，也可以直接写在html文件内 第四步、压缩 在html所在的目录执行命令： 运行结束后，目录结构将变成： .font-spider文件夹里放的是原来的完整的字体文件 myFont就是提取后的文件注：如果二次使用，
使用font-spider解决ttf文件过大问题
qq_36523196的博客
07-06 837
在捣鼓个人网页时，有个模块的字体看着不是那么好看，便找了个觉得看着顺眼的字体下载了放在项目中，字体是变了，但是首次加载时，资源加载时间竟然超过了1分钟，优化势在必行。
vue cli4 阻止图片转base64
Tankic的博客
02-23 2111
文章目录介绍功能步骤在项目根目录中新建vue.config.js文件vue.config.js文件内容 介绍 在使用vue cli4的过程中，我们遇到比较小的图片被转成了base64格式的编码。但实际使用的时候不需要，因为转码后的图片不够清晰，特别是在大屏和高分辨率的显示器时尤甚。 参考文献：vue.config.js配置参考 功能 避免vue cli4图片转码 步骤 在项目根目录中新建vue.config.js文件 vue.config.js文件内容 var path = require('path
在vue中使用ocr 识别base64图像中的数字
07-11
2. 将base64图片转换为图像对象：在Vue组件中，你可以使用`<img>`标签来展示base64图片。将base64字符串绑定到`src`属性上即可。 ```vue <img :src="base64Image" /> export default { data() { return ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值