有时候需要用到非常规字体,由其是在用一些中文字体时,页面上仅用到很少的字,体积过大的字体文件却导致页面加载速度大幅降低。这时候可以选择压缩字体文件的方式解决。
相关站点: 在线文件转换器 字蛛 GitHub 页面
将字体转换为 woff 格式
Woff
格式比常规的 ttf
格式体积更小,并且对浏览器支持度高,可采用文件转换工具对字体格式进行转换,例如使用Convertio等在线工具。
Web开放字体格式(Web Open Font Format,简称WOFF)是一种网页所采用的字体格式标准。此字体格式发展于2009年,现在正由万维网联盟的Web字体工作小组标准化,以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小,并且不包含加密也不受DRM(数位著作权管理)限制。
使用字蛛进行字体文件压缩
字蛛是一个智能 WebFont 压缩工具,它能自动分析出页面使用的 WebFont 并进行按需压缩。其支持 woff2、woff、eot、svg 字体格式的生成。
字蛛在使用过程中的一些限制:
- 其不支持
JavaScript
动态插入的元素与样式; .otf
字体格式需转换成.ttf
格式才能被压缩;- 仅支持
utf-8
编码的HTML
与CSS
文件。
首先进入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