借助字蛛进行字体压缩
字体太大加载速度慢之性能优化@font-face
字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

一、@font-face安装

npm install font-spider -g

二、在CSS中使用
字体太大加载速度慢之性能优化@font-face

@font-face { font-family: “SourceHanSansCN-Medium”; src:
url(’…/font/SourceHanSansCN-Medium.eot’); src:
url(’…/font/SourceHanSansCN-Medium.eot?#font-spider’) format(‘embedded-opentype’),
url(’…/font/SourceHanSansCN-Medium.woff’) format(‘woff’),
url(’…/font/SourceHanSansCN-Medium.ttf’) format(‘truetype’),
url(’…/font/SourceHanSansCN-Medium.svg’) format(‘svg’); font-weight: normal; font-style: normal; }

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

三、运行 font-spider 命令

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

相关文章:

猜你喜欢
相关资源
相似解决方案