引子- Fontawesome
很早之前使用fontawesome我们会除了引用字体库外，还需要引用fontawesome.css，在使用一个icon时，会在class中加入一个icon的类名，在查看fontawesome.css会发现，其符号字体显示的实现方式是使用类名加:before伪类来实现
例如
<i class="fa fa-plus" aria-hidden="true"></i>
其css写法：
.fa-plus:before {
content: "\f067"
}
或者不写css直接这样使用：
<i class="fa" aria-hidden="true"></i>
问题- Material Icons
在使用Material Icons 你可以直接这样写
<i class="material-icons">face</i>
也可以这样写
.material-icons.icon-face:before{
content: 'face'
}
<i class="material-icons icon-face"></i>
等效于
<i class="material-icons"></i>
非常的语义化，为啥可以这样呢，像之前的\E87C,都可以比较好理解,为字符的地址。
利用百度字体编辑工具可以看到相应字体符号地址：fontstore.baidu.com/static/edit…
那么face和0xE87C的关系是怎么来的呢?猜想字体文件中必然对应了一个face和0xe87c的映射表。然后浏览器渲染字符对应的字体时查询了这个映射表。
完整的materila icon中的符号名称和字体地址对应关系见:
github.com/google/mate…
google material icons中是这样解释的
本示例使用一种称为ligatures的印刷功能 ，该功能允许仅通过使用其文字名称来呈现图标字形。替换由网络浏览器自动完成，并且比等效的数字字符参考提供了更多的可读代码。
台式机和移动设备上的大多数现代浏览器均支持此功能。
也就是说使用了连字特性，但实际使用时去掉css中-webkit-font-feature-settings:'liga' 依然不受影响
大致看了下微软关于opentype的字体结构的文章，没有深入研究
docs.microsoft.com/en-us/typog…
方案- svg symbol
对于现在web开发中加入符号，我们还常用的在svg中定义symbol的方法，symbol可以从阿里iconfont中下载,这样可以更方便的在设计师对图标修改后拿来使用，修改颜色大小也十分方便
定义
<svg aria-hidden="true" style="width:0;height:0;position:fixed;overflow:hidden">
<symbol id="icon-add" viewBox="0 0 1024 1024">
<path d="M66.769262 448.402918l890.359149 0 0 127.194164L66.769262 575.597082 66.769262 448.402918z" p-id="1160"></path>
<path d="M448.454082 66.820426l127.194164 0 0 890.359149L448.454082 957.179574 448.454082 66.820426z" p-id="1161"></path>
</symbol>
</svg>
使用
.svgicon { width: 12px; height: 12px;}
<svg class="svgicon" >
<use xlink:href="#icon-add"></use>
</svg>
工程化时，打包可以使用 svg-sprite-loader 将 svg 编译到symbol 再定义一个组件use symbol 然后引用自定义组件即可
参考
