前端、设计师福利再升级:用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 条评论
登录 后参与评论

相关文章

来自专栏前端儿

【转】http-equiv="X-UA-Compatible" 设置IE浏览器兼容模式详解

文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。

991
来自专栏达摩兵的技术空间

14年工作回顾(一)

本文开始会把之前项目中遇到的一些问题进行分类整理,并得出其经验值。也许其本身在今天的技术架构中没有任何实用价值,但在项目开发中能有举一反三的作用。

582
来自专栏张善友的专栏

发布一个定制的webpart:RssReader

此webpart改造自海洋工作室(http://www.oceanstudio.net)的SharePoint Server WebPart.http://we...

1716
来自专栏北京马哥教育

最通俗的 Python3 网络爬虫入门

网络爬虫,也叫网络蜘蛛(Web Spider)。它根据网页地址(URL)爬取网页内容,而网页地址(URL)就是我们在浏览器中输入的网站链接。比如:https:/...

960
来自专栏FreeBuf

利用qq钓鱼或者定位女友是否回家

前言 随着手机开始普及,现在几乎是人手一部手机,而且qq是必装的app,这正好给了骗子可乘之机,根据你的爱好,给你推送相应的内容,让你防不胜防。 看看下面的聊天...

2805
来自专栏Crossin的编程教室

【Python 第44课】 查天气(2)

今天有些事情耽搁了,课程来得晚了些。 先来看python中的urllib2,这是python中一个用来获取网络资源的模块。我们平常上网,在浏览器地址栏中输入一个...

3068
来自专栏沈唁志

什么是404页面?对网站有什么影响?

1574
来自专栏帘卷西风的专栏

关于Excel到lua的转表工具

       关于游戏项目的配置文件,有很多的方案,有些项目有专业的工具,有些则是直接使用json、xml、csv之类的配置文件,使用lua做配置文件的项目也不...

882
来自专栏令仔很忙

静态网页VS动态网页

在做《牛腩新闻发布系统》的时候,建立的网页有.html的,还有.aspx,刚开始接触,还以为这些东西是一样的呢,当看ASP.NET视频的时候,听见里面讲课的老...

721
来自专栏肖蕾的博客

为安卓APP设置统一风格的界面切换动画那么

922

扫码关注云+社区