字蛛 font-spider 使用

最新推荐文章于 2024-02-22 09:51:44 发布

羽筠

最新推荐文章于 2024-02-22 09:51:44 发布

阅读量554

点赞数 11

分类专栏： HTML + CSS + JS 文章标签：前端

本文链接：https://blog.csdn.net/qq_16494241/article/details/135697535

版权

HTML + CSS + JS 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

字蛛 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 即可

最终页面展示效果：

羽筠

关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
字蛛 font-spider 使用

在移动端的web开发中，设计师们往往为了页面显示效果好看，会使用一些特殊字体，那我们开发时就需要引入这些字体文件，但字体文件如果太大的话，下载就会特别慢，会大大影响的体验效果，所以我们需要对此进行优化处理。字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。它通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。
复制链接

扫一扫