字体使用
字体压缩
完整的字体库文件对于Web应用来说太过庞大
解决方案一:字蛛
所谓字体库,就是要包含尽可能多的字体,其实应用中可能根本用不到这么多,这时候就可以使用字蛛
压缩一下,它会识别html
中的所有用到该字体的文字,去除没有用到的字体。
使用方法:
-
安装
npm install font-spider -g
-
把所有可能用到的字体都写到一个html文件
index.html
中,同时用CSS设置引入并使用外部字体/*声明 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 ./index.html
可以得到的是一个抽取后的小型的font字体文件,还有一个备份后的原字体文件。