这几天把页面底部的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 Github

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                # 查看所有用法

啊哈！简直太方便了