前端、设计师福利再升级:用FSP彻底拥抱中文WebFont时代

自从多年前刚入行的时候,中文自定义字体在网页上差不多只有一种存在,那就是“图片”。因为中文字体的体积实在太大了,还存在各种问题,这多多少少限制了中文网页在设计上的发展,但是人们也没有停下寻找解决方案的脚步。比如前nodejs时代的各种GUI工具,nodejs时代的fontmin、font-spider(字蛛)...

目前来说,最方便的要数font-spider(字蛛)了,发布的时候也震惊中外。它可以自动提取网页里面使用的自定义字体的文字,并且输出多终端兼容。在大多数不需要兼容IE7(大部分IE8还是网吧客户端内嵌页面)的现在,很多专题都十分适合使用字蛛压缩自定义字体。例如这个专题的倒计时文字:

http://fn.qq.com/act/a20180321f404/index_test.htm

但是为什么稍大型项目或是单页应用不太推荐使用呢?

从我的使用体验和字蛛的一些issue上来看,虽然字蛛已经是字体优化界的宇宙第一了,但是还存在几个问题:

1、不支持动态渲染的项目

2、不支持GBK编码

3、多页面的支持不友好

4、在线页面配置繁琐

在做堡垒之夜官网的时候,刚好碰到了这样几个问题,GBK编码、有些元素是脚本插入的、有些页面是系统生成的,用字蛛十分痛苦。于是就想能不能搭配无头浏览器把线上页面down在本地之后,模拟出适合字蛛的环境。

说干就干,经过一段时间的鼓捣,FSP(font-spider-plus)工具腾空发布啦!从现在开始,彻底拥抱中文WebFont时代!

原理:使用puppeteer分析线上页面 -> 合并压缩线上页面外联样式 -> 样式添加到线上页面文本流 -> 用font-spider api压缩WebFont  

直达连接 https://github.com/allanguys/font-spider-plus   >,等您的star :)

FSP除了兼容字蛛的所有特性以外,它还支持GBK编码,支持线上多页面配置、支持vue等动态渲染界面!

使用概览

示例中70个字体压缩后各兼容版本只需要10K~26K,不仅提高浏览器加载速度,扩展性也更好!改文字改大小甚至改简单的效果再也不需要麻烦射鸡湿了。

特性

除了兼容font-spider(字蛛)支持的特性:

  1. 压缩字体:智能删除没有被使用的字形数据,大幅度减少字体体积
  2. 生成字体:支持 woff2、woff、eot、svg 字体格式生成

font-spider-plus(字蛛+)还具有以下特性:

  1. 支持线上动态渲染的页面
  2. 支持线上GBK编码的文件

安装

使用范例

一、书写 CSS

出自:font-spider中文文档

特别说明: @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成

二、压缩本地WebFont

特别说明:htmlFile支持通配符,例如*.htm,*.shtml

三、压缩URL中的WebFont

1、初始化fspconfig文件

在根目录下生成fspconfig.js文件

2、完善fspconfig.js文件

3、执行

示例文件下载: Demo.zip               

直达连接 https://github.com/allanguys/font-spider-plus   > ,等您的star :p

ps:字蛛+名称已经过糖饼同意,并已在github字蛛项目添加FSP外链。

附录:

1:@font-face支持概览

2:内部字体版权申请地址:

http://dcloud.oa.com/Material/Font

原文发布于微信公众号 - 腾讯NEXT学位(NextDegree)

原文发表时间:2018-06-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

WordPress 网站基于REST API 开发“微信小程序”实战

几周前,Jeff 花了两天将自己的WordPress 网站做了个微信小程序版本。这篇文章主要记录自己在开发第一版的过程,顺便为有兴趣的你剖析如何将一个WordP...

3666
来自专栏沈唁志

随机显示心灵鸡汤、开心笑话、名人名言功能—WordPress插件推荐

1603
来自专栏腾讯移动品质中心TMQ的专栏

H5前端性能测试快速入门

说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试。

5127
来自专栏前端知识分享

第130天:移动端-rem布局

当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单,关键在于对不同设备的适...

2334
来自专栏IT大咖说

2018年1月份最热门的JavaScript开源项目

本篇文章为大家盘点了1月份最热门的 JavaScript 项目,让我们一起来看下吧! 一、编辑器tui.editor https://github.com/nh...

2858
来自专栏腾讯开源的专栏

【开源公告】高性能的图片框架 LKImageKit 正式开源

LKImageKit LKImageKit 是一个高性能的图片框架,包括了图片控件,图片下载、内存缓存、磁盘缓存、图片解码、图片处理等一系列能力。合理的架构和...

3734
来自专栏腾讯移动品质中心TMQ的专栏

H5前端性能测试快速入门

前言 说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试。那本文谈到...

2386
来自专栏微信小程序开发

微信小程序开发常见问题(四)

知晓程序员,专注微信小程序开发的程序员! 一、小程序不同页面之间的传值方式 a、URL传值 这种方式最常用,比如: wx.navigateTo({ url...

3985
来自专栏龙首琴剑庐

原 linux中goldendict发声词

2394
来自专栏微信小程序开发

微信小程序开发常见问题(七)

知晓程序员,专注微信小程序开发的程序员! 一、判断小程序版本号 小程序的API是不断更新的,你可能使用某个API时,文档里会说明,此API在1.x.x版本开始...

5265

扫码关注云+社区