利用字蛛FontSpider压缩webfont字体演示

WebFont 技术可以让网页使用特殊字体，它通过 CSS 的 @font-face 语句引入字体资源，使用 CSS 选择器指定运用字体的文本，在通常的前端开发工作中，由于中文字体文件普遍都好几M，尤其像是移动端项目，加载完整的字体文件不太现实，考虑到性能问题，可以选择使用font-spider对字体文件进行压缩。

安装

FontSpider依赖Node,先安装好 NodeJS，然后执行：

npm install font-spider -g

使用

在 CSS 中使用 WebFont：

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

简洁版

使用选择器指定字体

.box{
    font-family: 'myfont';
}

注意事项

1. @font-face 中的 src 定义的 .ttf 文件必须存在;

2. 开发阶段请使用相对路径的 CSS 与 WebFont;

3.需要使用特殊字体的文本，css容器需要定 义 font-familly;

4.font-spider 仅适用于固定文本，如果文字内容为动态可变的，新增的文字将无法显示为特殊字体。

运行 font-spider 命令：

页面依赖的字体将会自动压缩好，原 .ttf 字体会备份；

如需再次压缩，保持.ttf字体文件不变，修改html文字之后，再次运行font-spider即可。

字体效果