【第1268期】字蛛+发布!支持动态渲染、远程多页面字体压缩
优采云 发布时间: 2022-06-19 23:23【第1268期】字蛛+发布!支持动态渲染、远程多页面字体压缩
前言
字蛛在2016年的时候就知道了,当今天再次看到的时候更多想起网页游戏的官网跟活动页,可能在这类型的设计还原中蛮有适用场景的。今日早读文章由腾讯tgideas@Allan投稿分享。
@Allan,来自腾讯互娱tgideas团队,负责游戏相关的web业务。喜欢鼓捣提高生产力的前端工具和研究创意相关的技术实现。
正文从这开始~
自从多年前刚入行的时候,中文自定义字体在网页上差不多只有一种存在,那就是“图片”。因为中文字体的体积实在太大了,还存在各种问题,这多多少少限制了中文网页在设计上的发展,但是人们也没有停下寻找解决方案的脚步。比如前nodejs时代的各种GUI工具,nodejs时代的fontmin、font-spider(字蛛)
目前来说,最方便的要数font-spider(字蛛)了,它可以自动提取网页里面使用的自定义字体的文字,并且输出多终端兼容。在大多数不需要兼容IE7(大部分IE8还是网吧客户端内嵌页面)的现在,很多专题都十分适合使用字蛛压缩自定义字体。例如这个专题的倒计时文字:
倒计时
但是为什么稍大型项目或是单页应用不太推荐使用呢?
从我的使用体验和字蛛的一些issue上来看,虽然字蛛已经是字体优化界的宇宙第一了,但是还存在几个问题:
1、不支持动态渲染的项目
2、不支持GBK编码
3、多页面的支持不友好
4、在线页面配置繁琐
在做堡垒之夜官网的时候,刚好碰到了这样几个问题,GBK编码、有些元素是脚本插入的、有些页面是系统生成的,用字蛛十分痛苦。于是就想能不能搭配无头浏览器把线上页面down在本地之后,模拟出适合字蛛的环境。
说干就干,经过一段时间的鼓捣,FSP(font-spider-plus)工具腾空发布啦!从现在开始,彻底拥抱中文WebFont时代!
原理:使用puppeteer分析线上页面 -> 合并压缩线上页面外联样式 -> 样式添加到线上页面文本流 -> 用font-spider api压缩WebFont
FSP除了兼容字蛛的所有特性以外,它还支持GBK编码,支持线上多页面配置、支持vue等动态渲染的界面!
使用概览
示例中70个字体压缩后各兼容版本只需要10K~26K,不仅提高浏览器加载速度,扩展性也更好!改文字改大小甚至改简单的效果再也不需要麻烦射鸡湿了。
特性
除了兼容font-spider(字蛛)支持的特性:
font-spider-plus(字蛛+)还具有以下特性:
安装
npm i font-spider-plus -g
使用范例一、书写 CSS
出自:font-spider中文文档
/*声明 WebFont*/<br style="box-sizing: border-box;" />@font-face { <br style="box-sizing: border-box;" /> font-family: 'source'; <br style="box-sizing: border-box;" /> src: url('../font/source.eot'); <br style="box-sizing: border-box;" /> src: url('../font/source.eot?#font-spider') format('embedded-opentype'), <br style="box-sizing: border-box;" /> url('../font/source.woff2') format('woff2'), <br style="box-sizing: border-box;" /> url('../font/source.woff') format('woff'), <br style="box-sizing: border-box;" /> url('../font/source.ttf') format('truetype'), <br style="box-sizing: border-box;" /> url('../font/source.svg') format('svg'); <br style="box-sizing: border-box;" /> font-weight: normal; <br style="box-sizing: border-box;" /> font-style: normal;<br style="box-sizing: border-box;" />}<br style="box-sizing: border-box;" />/*使用指定字体*/<br style="box-sizing: border-box;" />.home h1, .demo > .test {font-family: 'source';}
特别说明:@font-face中的src定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
二、压缩本地WebFont
fsp local [options]
特别说明:htmlFile支持通配符,例如.htm,.shtml
三、压缩URL中的WebFont1、初始化fspconfig文件
fsp init
在根目录下生成fspconfig.js文件
2、完善fspconfig.js文件
{ <br style="box-sizing: border-box;" /> /** <br style="box-sizing: border-box;" /> * 本地font存放路径
* @type {String}
*/ <br style="box-sizing: border-box;" /> "localPath" : "../font/", <br style="box-sizing: border-box;" /> /** <br style="box-sizing: border-box;" /> * 线上字体文件路径 (网址中样式文件内font-family的src路径)
* @type {String}
*/ <br style="box-sizing: border-box;" /> "onlinePath" : "../font/", <br style="box-sizing: border-box;" /> /** <br style="box-sizing: border-box;" /> * URL
* @type {Array}
*/ <br style="box-sizing: border-box;" /> "url" : [ <br style="box-sizing: border-box;" /> "http://ieg.tencent.com/", <br style="box-sizing: border-box;" /> "http://game.qq.com/"<br style="box-sizing: border-box;" /> ]<br style="box-sizing: border-box;" />}
3、执行
fsp run
示例文件下载:
项目地址:
最后,为你推荐
关于本文