前言:

前段时间刚完成一个外项目,歇了几天,老大让我看看公司的官网,优化一下,发现移动端的字体下载特别慢,才发现引用了字体包,一个字体包就达到了11M,想着既然有了图片压缩,那么应该有字体压缩,所以百度,弄了起来,废了不少劲,遇到不少坑,记录下来。

WebFont可以让网页使用特殊字体,就不用针对特殊字体用图片来代替了,通过 CSS3的新属性@font-face 语句引入字体资源,然后使用 CSS 选择器指定 font-family运用字体的文本。

一 了解字蛛

字蛛 正如官网所说:是一个中文字体压缩器,(http://font-spider.org/)

它的原理就是将页面引用特殊字体的字体抽出来,然后访问字体包对应的字体,进而合成一个字体包,这样就不用引入3000多个字体了,实现了按需引入的功能。

官方话:字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

虽然官网有详细的教程,自己还是再记录下,哈哈哈。

二 安装

font-spider是一个node包,依赖于node,所以应先下载node,下载过程略~(前端再不懂node,真不好意思说是前端了)

之后:

npm install font-spider -g

查看版本号

font-spider —version

如果出现版本号,则代表安装成功。

三 使用

在 CSS 中使用 WebFont:

/*声明 WebFont*/
@font-face {
font-family: 'myfont';
src: url('../font/myfont.eot');
src:url('../font/myfont.eot?#font-spider') format('embedded-opentype'),
url('../font/myfont.woff') format('woff'),
url('../font/myfont.ttf') format('truetype'),
url('../font/myfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

四 运行

在当前路径下,或者要压缩字体的html文件下,实行终端:

font-spider xxx.html

五 坑

  • 1 font-spider主要依据ttf格式的文件来进行分析压缩的,所以font-face的路径必须存在ttf格式的,其他格式不行。设计师的字体大部分都是网上下载的,可以找设计师要字体包的名字,然后通过这个网站字客网去找对应的ttf,下载~

  • 2 引入路径要使用相对路径,

    否则会报 Web Font was not found

  • 3 font-spider 仅适用于固定文本,如果文字内容为动态可变的,新增的文字将无法显示为特殊字体。解决办法是删除压缩后的,将备份出来的还原,重新压缩。

    font-spider xxx.html 如果不添加options,会默认备份原文件。

    font-spider会将页面依赖的字体将会自动压缩好,原 .ttf 字体会备份;

    如需再次压缩,还原.ttf字体文件,修改html文字之后,再次运行font-spider即可。

  • 4 如下:

    这个报错就是Quarto A没有对应字体包,我查过这个字体是类似于base64那样形式的字体,所以不存在引入文件。

    所以如果不想压缩某个字体包的话,就先注释其font-face。

  • 5 一旦压缩一次后,再压缩别的是没用的。

    比如说,我在一个文件夹里压缩了字体,然后生成了新的字体包,我又在另一个文件夹里压缩字体,这两个文件夹的字体共用一个字体包和font-face,所以再次压缩的就是上一个压缩字体包进行压缩的,所以导致页面中有的字体没有转化过来。

    解决办法:一个命令行压缩所有

     font-spider file1/*.html file2/*.html file3/*.html

    这样即可,*.html代表通配符,分析所有html格式的文件,多个文件就直接在后面加上。

    我最大的坑就是这个,没仔细看官方文档,认为只能一次性,浪费了好多时间,wtf。

总结

字蛛是一个很好用的字体压缩包,将十几M的字体包变成了多少k的字体包,减少了容量,提高了性能,优化了用户体验,推荐!

我把笔记放到GitHub里了,如需要可以去看看,有什么不对的地方,欢迎指正,大家一起进步加油。

使用字蛛教程以及遇到的bug的更多相关文章

  1. JavaSE教程-02Java基本语法-BUG:易错点

    1.区别文档注释和多行注释 多行注释:多一个* 多行注释 格式: /* 注释文字 */ 文档注释 格式:/** 注释文字 */ 2.有关变量名.类名.方法名等注意点 由字母.数字.下划线.$组成,但不 ...

  2. ABP中文网入门篇教程中的一个bug

    入门--从空项目开始--使用ASP.NET Core Web Application https://cn.abp.io/documents/abp/latest/Autofac-Integratio ...

  3. 字蛛fontSpider的使用

    字蛛官方文档 http://font-spider.org/index.html 首先安装全局包  npm install font-spider -g 然后下载字体 ,本次需要的是  "造 ...

  4. 字蛛(font-spider)-单独压缩字体(解决页面少有的特殊字体的字体包引用)

    特别想独立的把这个问题写成一篇内容,分享给大家. 反正我是这个字体压缩使用的受益者,不是打广告. 很久以前,设计师总是爱用一些奇奇怪怪的字体放在页面上,而作为前端我们很容易的就能直接使用TA们用到的字 ...

  5. Android ROM 制作教程

    本文来自: 起点手机论坛 具体文章參考:http://www.qdppc.com/forum.php?mod=viewthread&tid=43751&fromuid=1 1.Andr ...

  6. Python3中文教程

    搜索 此文档来源自网络 安装 PYTHON❝ Tempora mutantur nos et mutamur in illis. (时光流转,吾等亦随之而变.) ❞ — 古罗马谚语 深入欢迎来到 Py ...

  7. 【译】 AWK教程指南

    前面的话: 这几天写了一个程序,在同一个目录里生成了很多文件,需要统计其中部分文件的总大小,发现经常用到的ls.du等命令都无济于事,我甚至都想到了最笨的方法,写一个脚本:mkdir一个新目录,把要统 ...

  8. unity3d插件Daikon Forge GUI 中文教程-5-高级控件listbox和progress bar的使用

    (游戏蛮牛首发)大家好我是孙广东.官网提供了专业的视频教程http://www.daikonforge.com/dfgui/tutorials/,只是是在youtube上,要观看是须要FQ的. 只是教 ...

  9. 一个struts2登录bug的解决

    点登录的时候,在url后面总会加上一个;jsessionid=xxx 使找不到页面 的404 Bug ,百思不得其解,最后终于找到解决方案,实验最终成功解决了这个bug,下面是解决方案 1,增加依赖  ...

随机推荐

  1. RSACryptoServiceProvider加密解密签名验签和DESCryptoServiceProvider加解密

    原文:RSACryptoServiceProvider加密解密签名验签和DESCryptoServiceProvider加解密 C#在using System.Security.Cryptograph ...

  2. Win8Metro(C#)数字图像处理--2.30直方图均衡化

    原文:Win8Metro(C#)数字图像处理--2.30直方图均衡化 [函数名称] 直方图均衡化函数HistogramEqualProcess(WriteableBitmap src) [算法说明] ...

  3. AFN小结(简单的封装)

    AFN小结 1,AFN概念.原理 2,AFN的封装使用 3,AFN与其它框架对比 ————————————————————————————————— 1 , AFN的概念原理: AFN的基础是NSUR ...

  4. Win10《芒果TV》商店版跻身Windows商店《热门免费应用》前12强

    2017立春上班的第一天,让人惊喜的好日子,春节过后,Win10<芒果TV>商店版跻身Windows商店<热门免费应用>前12强,露出尖尖头,这个来自广大用户和合作伙伴们一直以 ...

  5. win10中使用sqlserver2008r2 SQL Server 配置管理器

    原文:win10中使用sqlserver2008r2 SQL Server 配置管理器 使用 Windows10 访问 SQL Server 配置管理器 因为 SQL Server 配置管理器是 Mi ...

  6. 我们错过了那么多机会,怎么办(就是预见未来的能力,并且要去做、要去投入,所以要主动学习、储备、选择,要不断的思考)good

    那天在IT职业咨询QQ群里聊天,提到腾讯.阿里,我说跟着这两家公司从小到大的朋友,都获得了不菲的回报,成了富翁或者财务自由了. 有群友感叹说:“是啊,我们错过了那么多机会.” 看到这句话,我心里一动, ...

  7. 微信小程序把玩(十八)picker组件

    原文:微信小程序把玩(十八)picker组件 picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知道是BUG还是啥!没 ...

  8. ORACLE 11.2.0.4 安装在 rhel6 上

    . 修改host文件,添加本机的host记录 [root@RACDG ~]# vi /etc/hosts 127.0.0.1 localhost localhost.localdomain local ...

  9. Docker笔记03-docker 网络模式

    docker网络模式分为5种 Nat (Network Address Translation) Host other container none overlay 第一种 Nat模式 docker的 ...

  10. 在Qt工程中加Boost

    摘要: Boost是一个很强大的C++库,堪比STL,里面有很多非常优秀的类库.我不多介绍,详情见官网:http://www.boost.org/ 要在我们的Qt工程中把这个库加进去应该怎么做呢?我今 ...