专栏首页腾讯NEXT学位前端、设计师福利再升级:用FSP彻底拥抱中文WebFont时代

前端、设计师福利再升级:用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)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序入门,看这一篇就够了!

    ? 文章为实战中踩坑经历,以及解决方案。同时是自己的一个项目回顾,在这里分享给大家,希望能帮助到大家。文章内代码需要左右滑动噢~ 登录授权 授权(基本信息,手...

    腾讯NEXT学位
  • 35岁的互联网人,你怕了吗?

    1 近十年中国互联网网民数量快速增长,网民数量十年复合增长率达到8.9%,超过这段时间中国的GDP平均增速;因此互联网行业快速发展,更是被标上了“高薪”“个性...

    腾讯NEXT学位
  • 药药切克闹!用酷炫的vue~制作酷炫的menu~

    腾讯NEXT学位
  • 1 快速开始 《Kotlin Web 开发实战教程》

    Like this website, the plugin allows you to create a Ktor project, but with the ...

    一个会写诗的程序员
  • Silverlight学习笔记之页面跳转

    在进行项目开发的时候,经常遇到页面之间的跳转,包括silverlight之间以及silverlight和html之间的跳转。 silverlight之间的页面跳...

    水击三千
  • 「精益企业」支持原则,价值观,思维方式,实施指南和领导角色

    精益企业是一个蓬勃发展的数字时代企业,在最短的可持续交付时间内为其客户提供具有竞争力的系统和解决方案。

    首席架构师智库
  • 16位汇编第七讲汇编指令详解第第三讲

                                 16位汇编第六讲汇编指令详解第第三讲 1.十进制调整指令 1. 十进制数调整指令对二进制运算的结果进行...

    IBinary
  • 未来互联城市的面向未来的建筑

    智能城市正稳步成为现实,这要归功于工程师们,他们通过集成开放的、可互操作的物联网平台,为未来的发展提供了保障,这些平台在未来几年内可以得到增强、发展和利用。随着...

    用户4122690
  • 打造“平台型”供应链解决食材流通低效信息交流,实现“云”上供应

    民以食为天,“食”在中国是一个4万多亿的大市场,供应链市场约占2万亿元。只要有1%的市场份额,可用空间就足够大。不少资本家相信中国一定会有百亿美金的餐饮供应链企...

    数商云
  • 用欧拉计划学Rust编程(第26题)

    最近想学习Libra数字货币的MOVE语言,发现它是用Rust编写的,所以先补一下Rust的基础知识。学习了一段时间,发现Rust的学习曲线非常陡峭,不过仍有快...

    申龙斌

扫码关注云+社区

领取腾讯云代金券