字蛛 font-spider 通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。
字蛛是一个年代比较久远的项目了,早年间文案之类还是写在 html 中,如今 SPA 等大行其道,html 在很多时候只是一个容器,使用 React, Angular 等类库的 JavaScript 代码会负责渲染这个容器中的内容,并和用户交互。这样就引发了一个问题,如果你所用到的中文字都是在 JavaScript 中动态生成的,那你让字蛛分析你的 html 岂不是无济于事?
之前鹅厂的工程师为了解决这个问题,开发了字蛛+ font-spider-plus
font-spider-plus(字蛛+)是一个智能 WebFont 压缩工具,它能自动分析出本地页面和线上页面使用的 WebFont 并进行按需压缩。
Allan 的这个项目更进一步,通过无头浏览器来爬取当前页面上的文字来动态生成精简版的 webfont.
但是字蛛+ 依赖 Chrome Puppeteer 无头浏览器,需要安装近两百兆的 Chrome,比较容易失败(比如我在公司内网环境,还需要绕过公司代理),对于我的需求有些「杀鸡用牛刀」了。另外我怀疑通过 Chrome 无头浏览器在页面生成阶段遍历页面上的字体也会有问题,比如我的弹窗(modal)是在用户交互之后才插入 dom 的,这样弹窗上的字体就捕获不到了吧。
FSW (font-spider-walker) 这个项目通过本地分析源代码来动态生成 webfont. 这个项目很简单,无需比较重的依赖,是直接遍历你的源码目录(可以指定目录),找出所有用到的中文字,调用字蛛生成你所需要的中文字体。这样无论你是 JavaScript 项目、还是 typescript 项目(可以指定文件后缀),无论你包含中文字体的结构是何时插入 dom 的,FSW 都可以捕获到。
如果这个非常简单的小工具可以解决你的燃眉之急,欢迎在 GitHub 给我点个 star;如果你发现了问题,并且希望 FSW 为你解决,欢迎给我提 issue
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。