首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用字蛛动态遍历JS生成中文字体

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

原创
作者头像
iPlus26
发布2018-07-21 10:14:16
4.1K0
发布2018-07-21 10:14:16
举报
文章被收录于专栏:前端小记前端小记

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

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档