FontCustom生成font-face字体图标

PolyQY

这几天把页面底部的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                # 查看所有用法

啊哈!简直太方便了

Submit