利用字蛛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即可。
字体效果