前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >利用fontspider压缩博客字体大小,达到加快访问速度

利用fontspider压缩博客字体大小,达到加快访问速度

作者头像
imzql
发布2022-09-19 14:42:16
6260
发布2022-09-19 14:42:16
举报
文章被收录于专栏:用户8297521的专栏

前言

作为一个博客的发烧友,最喜欢给自己主题diy各种花里花哨的字体

因为默认的字体微软雅黑总差点意思,但是一般的字体大都很大

有的甚至大到7mb,10mb的,都有,这对于小水管服务器十分的不友好

特别是一些国外的小鸡且带宽不理想的小鸡,可能访客文章都看完,博客字体还没加载完

前段时间有博友私聊我,博客的字体怎么压缩,那时候在准备四级,简单的回复了一下

今天考完,写一下方法给有需要的朋友,很简单

感谢fontspider作者

项目地址:https://github.com/aui/font-spider

准备node和npm环境

这个可以在nodejs官网下载

https://nodejs.org/en/download

安装的时候选择add to path 这样就可以直接安装node和npm环境

因为程序化,基本上一直默认勾选就可以安装了,很简单

但是如何自己校验自己的win系统是否安装了这两个环境了,只需要win+R输入cmd

召唤出自己的pc端的cmd控制台,输入node-v和npm-v,就如下图我这样,就表示安装完毕

全局安装 font-spider

这里我们还是老样子 win + R 输入cmd,输入

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

如果提示这个,就代表搞定了

开始压缩字体

我们首先在桌面创建文件夹,注意尽量是英文,例如ziti

然后在文件夹里面把自己需要压缩的字体放在该ziti文件夹

因为考虑到一些朋友不会css,所以这里我已经给各位朋友压缩好了,直接下载解压就可以了

https://wwi.lanzoup.com/iM6ur0695bcj

我们将自己需要压缩的字体ttf文件拖入该文件夹即可,然后将该字体ttf文件的文件名改为font.ttf

注意:这里需要解压成文件夹放在桌面上哦,否则无法执行字体压缩

这里我原字体的大小是15mb,这里我把它拖到ziti文件夹里面,将该字体命名为font.ttf

然后打开cmd 控制台输入以下代码

代码语言:javascript
复制
cd ziti

然后再输入以下代码,这样就可以了

代码语言:javascript
复制
font-spider index.html

然后你会发现自己ziti文件夹会多出一个font-spider文件夹,此文件夹里面的font.ttf就是压缩前的字体

根目录则是已经压缩后的字体,还有其他格式字体,该工具全部帮你压缩,直接应用到网页即可,非常方便

再看看被压缩的ttf字体大小,居然不到几kb

是不是很方便!

hljs.highlightAll();

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

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

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

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

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