2026-01-30 21:11:05 +08:00
|
|
|
---
|
2026-01-20 21:13:24 +08:00
|
|
|
pid: 83
|
2024-07-23 13:47:57 +08:00
|
|
|
layout: post
|
|
|
|
|
cid: 807
|
|
|
|
|
title: 利用fontspider压缩博客字体大小，达到加快访问速度
|
2026-03-01 11:48:36 +08:00
|
|
|
slug: 20220612
|
2026-01-30 21:11:05 +08:00
|
|
|
date: 2022-06-11T21:15:00.000Z
|
|
|
|
|
updated: 2023-06-08T09:16:21.000Z
|
2024-07-23 13:47:57 +08:00
|
|
|
author: 小赵同学
|
2026-01-30 21:11:05 +08:00
|
|
|
categories:
|
2024-07-23 13:47:57 +08:00
|
|
|
- 教程
|
2026-01-30 21:11:05 +08:00
|
|
|
tags: null
|
|
|
|
|
gemini_comment: >-
|
|
|
|
|
哇，这个日志真是太及时了！一直被博客字体大小困扰，每次加载都慢得要死，尤其是用国外小鸡的时候。感谢作者分享，我已经迫不及待地去安装node和npm，准备压缩字体了。这个工具真是太棒了，可以轻松把15mb的字体压缩到几kb，还能自动生成其他格式字体，真是方便至极！
|
|
|
|
|
top_img: 'https://usj.cc/usr/uploads/2022/04/2638431890.jpg'
|
2026-01-22 21:26:48 +08:00
|
|
|
draft: false
|
2026-01-30 21:11:05 +08:00
|
|
|
ai_comment: >-
|
|
|
|
|
哇，这篇教程简直是小水管服务器的救星！作为一个也曾被字体加载折磨过的博主，看到15MB瘦身成几KB简直想给作者磕头。font-spider这工具也太神奇了，感觉以后可以理直气壮地给博客换各种骚气字体了（虽然我CSS水平还停留在改颜色阶段）。考完四级立刻来分享干货，博主这效率比我背单词的速度快多了！
|
2024-07-23 13:47:57 +08:00
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 前言 ##
|
|
|
|
|
|
|
|
|
|
作为一个博客的发烧友，最喜欢给自己主题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，就如下图我这样，就表示安装完毕
|
|
|
|
|
|
|
|
|
|
![][1]
|
|
|
|
|
|
|
|
|
|
## 全局安装 font-spider ##
|
|
|
|
|
|
|
|
|
|
这里我们还是老样子 win + R 输入cmd，输入
|
|
|
|
|
|
|
|
|
|
npm install font-spider -g
|
|
|
|
|
|
|
|
|
|
如果提示这个，就代表搞定了
|
|
|
|
|
|
|
|
|
|
![][2]
|
|
|
|
|
|
|
|
|
|
开始压缩字体
|
|
|
|
|
------
|
|
|
|
|
|
|
|
|
|
我们首先在桌面创建文件夹，注意尽量是英文，例如ziti
|
|
|
|
|
|
|
|
|
|
然后在文件夹里面把自己需要压缩的字体放在该ziti文件夹
|
|
|
|
|
|
|
|
|
|
因为考虑到一些朋友不会css，所以这里我已经给各位朋友压缩好了，直接下载解压就可以了
|
|
|
|
|
|
|
|
|
|
https://wwi.lanzoup.com/iM6ur0695bcj
|
|
|
|
|
|
|
|
|
|
我们将自己需要压缩的字体ttf文件拖入该文件夹即可，然后将该字体ttf文件的文件名改为font.ttf
|
|
|
|
|
|
|
|
|
|
注意：这里需要解压成文件夹放在桌面上哦，否则无法执行字体压缩
|
|
|
|
|
|
|
|
|
|
![][3]
|
|
|
|
|
|
|
|
|
|
这里我原字体的大小是15mb，这里我把它拖到ziti文件夹里面，将该字体命名为font.ttf
|
|
|
|
|
|
|
|
|
|
![][4]
|
|
|
|
|
|
|
|
|
|
然后打开cmd 控制台输入以下代码
|
|
|
|
|
|
|
|
|
|
cd ziti
|
|
|
|
|
|
|
|
|
|
然后再输入以下代码，这样就可以了
|
|
|
|
|
|
|
|
|
|
font-spider index.html
|
|
|
|
|
|
|
|
|
|
然后你会发现自己ziti文件夹会多出一个font-spider文件夹，此文件夹里面的font.ttf就是压缩前的字体
|
|
|
|
|
|
|
|
|
|
根目录则是已经压缩后的字体，还有其他格式字体，该工具全部帮你压缩，直接应用到网页即可，非常方便
|
|
|
|
|
|
|
|
|
|
![][5]
|
|
|
|
|
|
|
|
|
|
再看看被压缩的ttf字体大小，居然不到几kb
|
|
|
|
|
|
|
|
|
|
![][6]
|
|
|
|
|
|
|
|
|
|
是不是很方便！
|
|
|
|
|
|
|
|
|
|
|
2026-01-23 20:38:35 +08:00
|
|
|
[1]: 4046170908.png
|
|
|
|
|
[2]: 3204045101.png
|
|
|
|
|
[3]: 1554922097.png
|
|
|
|
|
[4]: 2949738509.png
|
|
|
|
|
[5]: 1342016947.png
|
|
|
|
|
[6]: 3372263093.png
|
2026-01-22 21:26:48 +08:00
|
|
|
|
