优化 icon-font

[zhouzhongyuan]

目的： 减少ttf文件的体积 途径：删除不需要的字符，仅保留需要的字符

成果：

• [ ] 自定义的一套字体（包含自己的名字）。

工具：

• fontmin

• font-spider

• fontstore

[zhouzhongyuan]

1. What is ttf?

2. 前端如何使用icon-font

3. 如何查找需保留的字符

[zhouzhongyuan]

1. What is ttf?

• ttf docs

• todo 1

http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=iws-chapter08

[zhouzhongyuan]

2. 前端如何使用icon-font

Icon font for the web

[zhouzhongyuan]

3. 如何查找需保留的字符

遍历。 怎么查找

现在的icon-font使用方式

/**
 * 现在使用icon font的方式。
 * 总价两种，name中，leftElement/rightElement.
 *
 */

import { IconToggle } from 'react-native-material-ui';
<IconToggle
    name="more-vert"
>

import Toolbar from 'react-native-material-ui';
<Toolbar
    leftElement="arrow-back"
/>

import Icon from 'react-native-vector-icons/FontAwesome';
<Icon
    name={setting.icon}
/>

可能不在这个地方查找，可能会在生成的html中查找。

html中如何查找字符

gulp-fontmin的方法是取得html中所有的字符（包含< h t m l 等）。

https://my.oschina.net/JackSparrow/blog/865004

https://stackoverflow.com/questions/27048422/remove-unused-font-awesome-icons

font-spider的原理

1. 爬行本地 html 文档，分析所有 css 语句
2. 记录@font-face语句声明的字体，并且记录使用该字体的 css 选择器
3. 通过 css 选择器的规则查找当前 html 文档的节点，记录节点上的文本
4. 找到字体文件并删除没被使用的字符
5. 编码成跨平台使用的字体格式

使用Gulp+fontspider按需压缩中文字体，自由引入webfont还原设计

[zhouzhongyuan]

.

[zhouzhongyuan]

.

[zhouzhongyuan]

Failed to decode downloaded font: http://localhost:63342/font-demo/demo02/src/TpldKhangXiDict_1.022.otf
index.html:1 OTS parsing error: Web font size more than 30MB