前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >font-spider压缩字体文件

font-spider压缩字体文件

作者头像
时光潜流
发布2022-12-26 19:50:15
9960
发布2022-12-26 19:50:15
举报
文章被收录于专栏:博客专栏

    通过一段时间的运行,发现即使将网站的字体文件(dotted2MB,soft4MB)放到CDN加载依然很慢,而且流量跑的飞快!不得已开始寻找压缩字体的方式,最终找到了font-spider这个工具,可以依据html文件,将用到字体的字给单独提取出来打包成小的字体包,貌似只支持ttf格式的字体文件。

全局安装工具

    由于该工具具有普适性,未来也许啥时候还会经常用,所以这里采用全局安装。

代码语言:javascript
复制
npm i font-spider -g

编写html

    该html需要包含所有带外加字体的文字,并且设置字体。

    打开该html文件效果如下,已经运用了字体。

压缩

   使用font-spider指令来对html文件进行体取和压缩。结果如下图。一共发现了两个附加字体,并且成功的压缩了!每个几乎压缩了200倍!即使是我自己的服务器也可以轻松加载的程度。

便捷

    该工具还有个特别便捷的地方就是,它会找到我们的字体文件,并且自动替换该字体文件。当然不用担心原来的字体文件不见了,它会将完整包的字体文件放在.font-spider文件夹下,所以完全不需要考虑修改代码和原字体的备份问题。

总结

    通过font-spider字蛛工具,可以便捷的对字体文件进行压缩而不用考虑其它文件的迁移备份问题,非常方便。不过需要注意的是,只适用于那些固定字需要字体的情况,倘若是一个需要动态加载的文本内容,那么基本是无效的啦!所以对于哪些地方用这种字体一定要抉择好,对于动态的文本,利用大家本地都有的字体比如宋体、方正等更加合适。

:对于vue项目,如果没有特别的配置,在F12的source下,会发现一个webpack://的资源,会展示一部分源码,相对来说并不是很安全,需要在vue.config.js文件内加上 productionSourceMap: false 这样一行配置,这样打包的时候就不会生成map文件了,在开发环境仍然会存在哦!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-07-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 全局安装工具
  • 编写html
  • 压缩
  • 便捷
  • 总结
相关产品与服务
文件存储
文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档