ターミナルでアイコンフォントを使う理由

$ brew install fontforge

$ git clone https://github.com/iij/fontmerger
$ cd fontmerger

$ bin/fontmerger -h

usage: mergefonts.py [-h] [-V] [-v] [-x [EXT_FONT [EXT_FONT ...]]] [-i]
                     [-o OUTPUT_DIR] [-l] [--all] [--suffix SUFFIX]
                     [BASE_FONT [BASE_FONT ...]]

positional arguments:
  BASE_FONT             target fonts (default: [])

optional arguments:
  -h, --help            show this help message and exit
  -V, --version         show version (default: False)
  -v, --verbose         verbose mode (default: False)
  -x [EXT_FONT [EXT_FONT ...]], --ext_fonts [EXT_FONT [EXT_FONT ...]]
                        extend fonts (default: [])
  -i, --info            show base font information (default: False)
  -o OUTPUT_DIR, --output OUTPUT_DIR
                        output directory (default: ./)
  -l, --list            show available additional fonts (default: False)
  --all                 extend all fonts (default: False)
  --suffix SUFFIX       font name suffix (default: None)

$ bin/fontmerger -x fa fae linux powerline-extra powerline pomicons octicons -o ~/Library/Fonts/ --suffix=with-icons -- Ricty.ttf

$ bin/fontmerger -l

------------------------------- Available Fonts --------------------------------
         seti-ui: Seti UI
                   - a set of icons for Seti UI. https://atom.io/themes/seti-ui
         devicon: Devicon
                   - a set of icons representing programming languages, designing & development tools. http://devicon.fr/
 powerline-extra: Powerline Extra Symbols
                   - Extra glyphs for the powerline separators. https://github.com/ryanoasis/powerline-extra-symbols
       powerline: Powerline Symbols
                   - https://github.com/powerline/powerline
        pomicons: Pomicons
                   - A set of icons for Pomodoro Technique. https://github.com/gabrielelana/pomicons
              fa: Font Awesome
                   - http://fontawesome.io/
             fae: Font Awesome Extension
                   - http://andrelgava.github.io/font-awesome-extension/
           linux: Font Linux
                   - https://github.com/Lukas-W/font-linux
        octicons: Github Octicons
                   - https://octicons.github.com

アイコンフォントで視認性をさらに上げる

見やすいフォントでも、「晴れ」と「☀」のように文字列よりも同じ事柄を表す記号の方が分かりやすい場合が多くあります。
また、このような記号もフォントの一部なので色や下線などの装飾、背景色を変えるといった表現をすることで、より分かりやすく表示させることができます。

最近では、Unicodeのアップデートにより扱える絵文字も増えさらにフォントを使用した表現が多彩になってきました。
しかし、製品・ソフトウェアのロゴや開発現場で使う記号など存在しないものも多数あります。
そこで、Webアプリケーション等でよく使用されているアイコンフォントを使用することで必要な記号を補完し、より使いやすい環境へと昇華させることができるのではないかと考えています。

主要なアイコンフォント

• Font Awesome
  • Webアプリケーションでよく利用されているアイコンフォント
  • 種類が豊富で品質も非常に高い
• Github Octicons
  • Githubで使用されているアイコン
  • Gitに関連したアイコンは最も分かりやすい
• Powerline
  • ターミナルやエディタ(vim,Emacs)の区切りや行頭、行末を格好良く表示する山括弧の記号

上記以外にも既に様々な種類のアイコンフォントが公開されていますので、自分で作らずとも必要なアイコンが見つかると思います。
（フォントを使用、公開する場合はライセンスにご注意ください。）

Nerd Fontsプロジェクト

Nerd Fontsは、上記のような既存のアイコンフォントと合成するためのスクリプトと、それを使用して生成した合成済みの欧文フォント(ここでは総称してNerd Fontと呼ぶことにします)を公開しているプロジェクトです。
既に多くの開発者がNerd Fontを使用しており、Powerlevel9kやtheme-bobthefishなどNerd Fontに対応したZshやFishのテーマも公開されているので、すぐに利用できる環境が整っています。

ただし、Font Mergerの紹介で触れたように和文フォントに適用するとアイコンフォントと高さや位置がずれてしまう場合があります。その時はFont Mergerをお試しください。

FontForgeスクリプトの概要

FontForgeスクリプトを書いた時に調べた必要だった情報を書いておきます。これからFontForgeスクリプトを書く人の参考になれば幸いです。

FontForgeのPythonライブラリ

FontForgeはスクリプトでマクロ操作をする機能が用意されており、現時点で使用可能な言語はFontForge独自のものとPythonです。
PythonでFontForgeの操作を行うには

• fontforge
• psMat

という2つのライブラリを使用します。ちなみに、psMatはグリフの変形や移動時に指定するパラメータを生成するための補助ライブラリです。

フォントとグリフの大きさを表すパラメータ

FontForgeにおいてグリフ(Glyph)とはフォントの1つの文字情報を表します。
このフォントとグリフの大きさ（サイズ）を表す多くのパラメータがあり、Font Mergerで使用しているパラメータを紹介します。

ベースライン（baseline）

フォントの高さの基準となるy = 0の位置で、高さに関するパラメータの値はこの位置からの距離を数値化したものです。

アセント（ascent）

全てのアルファベットの最大の高さを表します。
余白を含むグリフ全体の最大の高さはHHead Ascent (hhea_ascent) / Win Ascent (os2_win_ascent)というパラメータで確認することができます。

ディセント(descent)

全てのアルファベットのベースラインから下方向の最大距離を表します。
HHEA Ascent, Win Ascent と同様にグリフ全体の下方向の最大距離はHHead Descent (hhea_descent) / Win Descent (os2_win_descent)というパラメータで表します。

グリフの変形(transform)

グリフの変形には、psMatライブラリを使用して変形するためのパラメータを生成し、このパラメータをグリフオブジェクトのtransformメソッドに指定してグリフを変形させます。

主に使う関数を紹介すると、

• scale(x, y)
  • 1.0を基準に割合でグリフの大きさを変更する
• translate(x, y)
  • 指定の距離を移動させる

 

Font Mergerでは2つのフォントの大きさや位置を比較し以下のようにグリフを変形させています。

サンプルコード(Python)

以下に示すのはシンプルな変形処理を行うサンプルコードです。
前述の通りマクロなのでグリフのコピー＆ペーストの部分は分かりづらいと思いますが、GUI操作をイメージしながら見てみてください。

import sourceforge
import psMat
 
# 合成先のフォント
base_font = fontforge.open('base_font.ttf')
  
# アイコンフォント(合成するフォント)
sym_font = fontforge.open('symbol_font.otf')
 
# 幅を揃える
sym_font.em = src_font.em
 
# 高さを 3/4 に縮小
trans_scale = psMat.scale(1.0, 0.75)
 
# 100 points 下へ移動
trans_move = psMat.translate((0, -100))
 
# コピーするグリフを選択
sym_font.selection.select(('ranges', 'unicode'), 0xE000, 0xF000)
 
for sym_glyph in list(sym_font.selection.byGlyphs):
    index = sym_glyph.encoding
 
    # 変換処理(resize -> move)
    sym_glyph.transform(trans_scale)
    sym_glyph.transform(trans_move)
 
    # コピーするグリフを選択
    sym_font.selection.select(index)
 
    # 選択グリフをコピー
    sym_font.copy()
 
    # コピー先のグリフを選択
    base_font.selection.select(index)
  
    # コピーしたグリフ(sym_glyph)をペースト
    base_font.paste()
 
sym_font.close()
base_font.generate('generated-base_font.ttf', flags=('opentype'))
base_font.close()