字蛛 font-spider

字蛛（font-spider）-[简体中文]


在移动端的web开发中，设计师们往往为了页面显示效果好看，会使用一些特殊字体，那我们开发时就需要引入这些字体文件，但字体文件如果太大的话，下载就会特别慢，会大大影响的体验效果，所以我们需要对此进行优化处理。


字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。
它通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。
它可以将 十几M 的字体包压缩成 KB 体量的字体包，提高了性能，优化了用户体验。


限制
不支持 javascript 动态插入的元素与样式
.otf 字体需要转换成 .ttf 格式才能被压缩
仅支持 utf-8 编码的 HTML 与 CSS 文件
CSS content 仅支持 content: 'prefix' 和 content: attr(value) 这两种形式


ttf字体下载：
字客网：

一、安装（需要安装nodejs）

npm install font-spider -g


二、使用：

1、demo 范例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body{ font-size: 30px;}
@font-face {
  font-family: "SourceHanBold";
  src:url('syst-b.ttf') format('truetype');
}
.SourceHanBold{
  font-family: "SourceHanBold","PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei";
}
@font-face {
  font-family: "SourceHanRegular";
  src:url('syst-r.ttf') format('truetype');
}
.SourceHanRegular{
  font-family: "SourceHanRegular","PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei";
}
</style>
<body>
  
  <h3>引用思源宋体Bold：</h3>
  <div class="SourceHanBold">
    <p>您还没有获得过奖品哦~0123456789获得4分找到个可参与抽奖哦～恭喜您可参与抽奖活动 抽中 很遗憾，奖品擦肩而过</p>
    <p style="color: red;">压缩字体后加的字</p>
  </div>
  <h3>引用思源宋体Regular：</h3>
  <div class="SourceHanRegular">
    <p>请输入您的名字 请输入认证手机号18888</p>
    <p style="color: red;">压缩字体后加的字</p>
  </div>
  
</body>
</html>

2、压缩 WebFont，如我的文件路径
win+r 输入 cmd 进入
e: 回车执行
cd www\0-project\测试\字蛛 回车执行
font-spider test.html 回车执行

注：

如需再次压缩，须还原 .ttf 字体文件，修改 html 引用文字之后，再次运行 font-spider 即可

 

最终页面展示效果： 

# 前端
Logo
EazyDevelop社区

一站式 AI 云服务平台

更多推荐

探秘深海：一款强大的深度学习框架——DeepSea

在人工智能领域中，深度学习是推动科技进步的一股强大动力。今天，我们要向大家推荐的是一个专为深度学习爱好者和开发者打造的强大框架——DeepSea。该项目由Team-Neptune团队开发，并托管在Gitcode平台上，旨在简化和加速深度学习模型的研发过程。## 技术分析### 灵活的架构设计DeepSea采用模块化的设计，允许用户根据需求选择不同的组件，如优化器、损失函数等，以构建定制

avatar EazyDevelop社区
cover

仓颉迁移实战：将 Node.js 微服务移植到 Cangjie 的工程化评测

avatar EazyDevelop社区

taosync：适用于AList v3的自动化同步工具

在现代生活中，数据同步和备份已成为维护数据安全的关键环节。taosync是一款专为AList v3设计的自动化同步工具，能够帮助用户轻松地同步和备份他们的数据到多个网盘或FTP存储服务。这款工具的开发初衷是为了保存孩子的成长照片，其名称“taoSync”也因此而来。taosync以开源免费的形式提供，支持几乎所有的常用平台，并且提供了完善的日志记录、任务管理以及安全的密码加密功能。## 项目技

avatar EazyDevelop社区