大 纲

有时候需要用到非常规字体,由其是在用一些中文字体时,页面上仅用到很少的字,体积过大的字体文件却导致页面加载速度大幅降低。这时候可以选择压缩字体文件的方式解决。

 相关站点在线文件转换器 字蛛 GitHub 页面

将字体转换为 woff 格式

Woff 格式比常规的 ttf 格式体积更小,并且对浏览器支持度高,可采用文件转换工具对字体格式进行转换,例如使用Convertio等在线工具。

Web开放字体格式(Web Open Font Format,简称WOFF)是一种网页所采用的字体格式标准。此字体格式发展于2009年,现在正由万维网联盟的Web字体工作小组标准化,以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小,并且不包含加密也不受DRM(数位著作权管理)限制。

使用字蛛进行字体文件压缩

字蛛是一个智能 WebFont 压缩工具,它能自动分析出页面使用的 WebFont 并进行按需压缩。其支持 woff2、woff、eot、svg 字体格式的生成。

字蛛在使用过程中的一些限制:

  1. 其不支持 JavaScript 动态插入的元素与样式;
  2. .otf 字体格式需转换成 .ttf 格式才能被压缩;
  3. 仅支持 utf-8 编码的 HTMLCSS 文件。

首先进入node.js官网,下载最新稳定版并进行安装。安装完成后,在终端中输入如下命令安装字蛛。

npm install font-spider -g

使用如下命令指定网页路径,字蛛会自动完成字体识别及压缩。

font-spider XXX/XXX.html

字蛛使用技巧

支持一个或多个页面地址。

font-spider XXX/XXX.html XXX/XXXX.html

支持使用通配符同时识别路径下的全部页面。

font-spider XXX/*.html

字蛛支持一个或多个页面地址,并且支持输入网址。

font-spider XXX/XXX.html XXX/XXXX.html

将线上的页面的 WebFont 映射到本地来进行压缩。

font-spider --map "XXX/font" http://XXX.com/index.html