用字蛛动态遍历JS生成中文字体

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

https://github.com/iplus26/font-spider-walker

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LeetCode

IDEA 的快捷按键

常用的有fori/sout/psvm+Tab即可生成循环、System.out、main方法等boilerplate样板代码

25820
来自专栏菩提树下的杨过

silverlight3的"伪"3D续--图片横向轮换

上一篇里,已经知道了“伪3D”是怎么回事,今天结合以前的做的图片广告轮换,又弄了一个图片切换的小东东,不知道以后有什么用,先贴在这里备份: 效果图: ? 因为s...

23290
来自专栏Coding01

推荐一款快速制作通讯录的微信小插件

只要有通讯录的地方,就会需要对通讯录姓名进行分组排序和界面设计,主流做法基本是按照人名的拼音首字母排序,效果图如下:

34520
来自专栏繁花云

11.14学习总结

解决方案:mysqli_set_charset($conn,utf8)

8700
来自专栏Jerry的SAP技术分享

Jerry的Fiori原创文章合集

我曾经于2014年10月到2016年5月工作于SAP CRM Fiori应用的开发团队, 我所在的团队负责下列这8个Fiori应用的维护和持续开发:

24350
来自专栏搞前端的李蚊子

小程序第三方框架对比 ( wepy / mpvue / taro )

     众所周知如今市面上端的形态多种多样,手机Web、ReactNative、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同...

94540
来自专栏葡萄城控件技术团队

UWP 入门教程2——如何实现自适应用户界面

系列文章 UWP入门教程1——UWP的前世今生 如上文所说的,布局面板根据可用的屏幕空间,指定界面元素的大小和位置。例如StackPanel 会水平或垂直排列界...

23650
来自专栏企鹅号快讯

再见!陪伴我多年的setuna

hi,又到了charming的时间,平日里用setuna截图小工具的人肯定大有人在,但是最近我发现了一个比它更好用的小工具——PureRef,借此机会推荐一下~...

316100
来自专栏Android干货园

Base封装(二)-- 封装属于自己的Library(UI篇)

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/73...

15910
来自专栏Python爬虫实战

Python爬虫之四:今日头条街拍美图

运行平台: Windows Python版本: Python3.6 IDE: Sublime Text 其他工具: Chrome浏览器

11510

扫码关注云+社区

领取腾讯云代金券