登录
    Technology changes quickly but people's minds change slowly.

前端中文字体压缩 font-spider

开源分享 破玉 1557次浏览 0个评论

        中文字体和英文字体相比要大很多,英文说白了就26个字母,而汉字就没有那么幸运了,所以一般前端中文字体文件都比较大,如果站点带宽ia不够的话,加载会比较缓慢,所以我们要想办法压缩下字体大小,无非就是只在字体文件中包含我们需要的汉字。
        字蛛(FontSpider)通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。
        安装字蛛

npm install font-spider -g

在 CSS 中使用 WebFont:

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

/*使用选择器指定字体*/
.home h1, .demo > .test {
    font-family: 'pinghei';
}

1. @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
2. 开发阶段请使用相对路径的 CSS 与 WebFont
运行 font-spider 命令,压缩字体:

font-spider ./demo/*.html

font-spider 会自动读取html 文件中的汉字来进行筛选,从而实现字体压缩,缺点就是只能从静态文件压缩,如果需要动态筛选你需要
https://github.com/allanguys/font-spider-plus
除了兼容font-spider(字蛛)支持的特性:
压缩字体:智能删除没有被使用的字形数据,大幅度减少字体体积
生成字体:支持 woff2、woff、eot、svg 字体格式生成
font-spider-plus(字蛛+)还具有以下特性:
支持线上动态渲染的页面
支持线上GBK编码的文件


华裳绕指柔, 版权所有丨如未注明 , 均为原创|转载请注明前端中文字体压缩 font-spider
喜欢 (1)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址