Home / Blog / node

Font-Spider 字蛛

Author: Vic.Wang 2016/11/07 Tags:nodenodejsfontspiderwebfont字蛛

前几天CY兄介绍了款node工具给我,是解决中文字体太大,按需加载文字的,用了下,感觉很棒,分享给大家。

在以前的开发中,拿到设计师给的视觉稿,总是要将设计稿中个性的文字都切成图片,因为用的是个性字体,你不能保证所有用户的电脑上都安装了这种字体,甚至可以说主动安装这些字体的用户是很少的,为了视觉稿的还原,为了设计师的高端大气上档次的页面,只能弄成图片呗。

页面中用到的个性字体不多的地方还好,如果用到的很多,那切图会变得繁琐,也会多出很多的请求数,就是用雪碧图拼也是麻烦的。

图片也不利于搜索引擎优化,也没法选中,用户体验不好。

但是直接引入中文字体,字体文件又太大,下载慢,浪费带宽。

传统方法的困境,请看官方团队的博文《设计师的春天:中文WebFont解决方案Font-Spider(字蛛)》

安装:

先安装好NodeJS,然后在命令行工具中执行npm安装

    npm install font-spider -g
                    

使用:

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

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

.ttf 格式的字体文件必须存在的,其他的工具会自动生成。

引入的字体最好拷贝一份到要压缩的目录,生成的时候是会删除没用到的文字,修改字体文件的,这是为了避免影响系统字体。

压缩:

    font-spider <filename.html>
                    

也可以用通配符 *.html

用命令行进入你要压缩的目录,使用上面的命令,运行完就可以得到删除后的字体了,是不是小了很多呢?

更多阅读:

设计师的春天:中文WebFont解决方案Font-Spider(字蛛)

字蛛官网

字蛛Github