myDocs
首页
  • JavaScript小记
  • HTML小记
  • CSS小记
  • 计算机网络
  • React小记
  • Vue小记
  • 手写js
  • 前端工程化
  • 前端性能优化
  • 实际项目开发
  • Typescript面试题
  • Nodejs面试题
  • 小程序
  • 排序
  • 算法题
  • Git小记
  • NodeJs小记
  • TypeScript小记
  • 正则表达式入门
  • Linux基本命令
  • PixiJS的基本使用
  • PixiJS实现一镜到底
  • Canvas入门
  • SVG入门
  • Echarts基本使用
  • antv G6的基础入门及树图的实际应用
  • Three.js
  • 《CSS揭秘》
  • 《Python编程:从入门到实践》
  • 低代码数据可视化平台开发记录
  • 中后台管理系统模板记录
  • 多页签开发记录
  • 浙政钉、浙里办、浙江政务服务网应用上架指南
Github
首页
  • JavaScript小记
  • HTML小记
  • CSS小记
  • 计算机网络
  • React小记
  • Vue小记
  • 手写js
  • 前端工程化
  • 前端性能优化
  • 实际项目开发
  • Typescript面试题
  • Nodejs面试题
  • 小程序
  • 排序
  • 算法题
  • Git小记
  • NodeJs小记
  • TypeScript小记
  • 正则表达式入门
  • Linux基本命令
  • PixiJS的基本使用
  • PixiJS实现一镜到底
  • Canvas入门
  • SVG入门
  • Echarts基本使用
  • antv G6的基础入门及树图的实际应用
  • Three.js
  • 《CSS揭秘》
  • 《Python编程:从入门到实践》
  • 低代码数据可视化平台开发记录
  • 中后台管理系统模板记录
  • 多页签开发记录
  • 浙政钉、浙里办、浙江政务服务网应用上架指南
Github

使用font-spider压缩字体文件

字蛛是一个智能 WebFont 压缩工具,它能自动分析出页面使用的 WebFont 并进行按需压缩。

步骤一、otf转ttf

如果字体格式为otf,需要使用python库 otf2ttf 转化字体格式(font-spider只对TTF格式的字体进行处理)

pip install otf2ttf
otf2ttf MyFont.otf

步骤二、使用font-spider减少ttf字体文件大小

使用font-spider自动分析出页面使用的 WebFont 并进行按需压缩。

1.全局安装

npm install font-spider -g

2.定义字体并使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @font-face {
        font-family: "Source Han Serif SC";
        src: url("./Source Han Serif SC.ttf");
      }
      .test {
        font-family: "Source Han Serif SC";
      }
    </style>
  </head>
  <body>
    <div class="test">你需要使用的文本</div>
  </body>
</html>

将常用的3500个中文字存储起来,然后通过font-spider来进行提取, 3500个字体可以包含99%的中文

3.执行命令,分离字体

font-spider index.html

在index.html同级目录下就会生成压缩后的字体文件

字体包更新,初始字体包被放置在.font-spider文件夹中

类似的WebFont (Web Open Font Format) 技术

fontmin

iconfont

有字库

最近更新: 2024/9/2 16:35
Contributors: chenshimeng