预计阅读时间： 2 分钟
这几天把页面底部的sns图标加进New Material主题，发现原作者是直接用png做 <button> 的背景图，这样的话有几个缺点，一是png放大了一以后会不清楚（虽然改用svg也能解决），二是要写太多自定义的css了，可移植性差，这也是最主要的一点（我懒，嘻嘻嘻），还有就是html里标签又div又a又button又span的，可读性也差。作为一个完美主义者，我怎么能容忍这样的结构呢，于是我果断加入@font-face方式的图标。
什么是font-face字体图标
unicode编码（也叫utf-8）除了正常的字符以外，\e000 开始的一段是空的，也就是留给自造字用。如果把图标放到这一段呢？这就是字体图标的原理，字体在css里类是@font-face，所以又叫font-face图标。
Fontcustom
说了那么多，到底Fontcustom是什么呢？
Fontcustom是一个基于rubygems的工具，帮助个位开发者把svg图片转成@font-face需要的字体格式，也生成好所需的css，要用时只需外链一个css就可以了。
安装fontcustom
安装rubygems
其实主要麻烦之处在于rubygems的安装，除了有一些坑以外，别的应该没有什么难度
ubuntu 16.04
apt install ruby ruby-dev
ubuntu 14.04
apt install ruby rubygems
安装Fontcustom
Fontcustom要求安装好 Ruby 1.9.3+, WOFF2, FontForge
安装依赖
# On Mac
brew tap bramstein/webfonttools
brew update
brew install woff2
brew install fontforge --with-python
brew install eot-utils
gem install fontcustom
# On Linux
sudo apt-get install zlib1g-dev fontforge
git clone https://github.com/bramstein/sfnt2woff-zopfli.git sfnt2woff-zopfli && cd sfnt2woff-zopfli && make && mv sfnt2woff-zopfli /usr/local/bin/sfnt2woff
git clone --recursive https://github.com/google/woff2.git && cd woff2 && make clean all && sudo mv woff2_compress /usr/local/bin/ && sudo mv woff2_decompress /usr/local/bin
安装fontcustom
gem install fontcustom
大功告成！
安装过程可能出现
gems报错
Cannot Compile Extension ffi
或者之类的
这是由于apt安装的rubygems要自行编译所有extension
安装libffi就可以了
apt install libffi-dev
Fontcustom 简单使用
fontcustom compile my/vectors # 生成到 `fontcustom/`
fontcustom watch my/vectors # 监视my/vectors的文件改变，即时生成
fontcustom compile # 使用默认的配置文件 ./fontcustom.yml
fontcustom config # 生成空白的配置文件
fontcustom help # 查看所有用法
啊哈！简直太方便了
