bootstrapのglyphiconみたいなのを自分で作る方法

bootstrapのglyphiconやfont awesome、その他cssフレームワークについているフォントのアイコンを作る方法について。

前置き

glyphiconのようなアイコンというのはフォントで作られている。フォントを使う利点というのは、サイズ変更や色の変更を自由に行えるということである。フォントなので当然複数の色は使えず単色になるが、補助的に使うものの場合、それで十分ということも多い。

フォントは当然クライアントのローカルにあるわけではないので自分で作成することになる。これを可能にするのが、指定したURLからフォントファイルをダウンロードさせてページ内で利用させる、CSS3のWebフォントという仕組みだ。

本稿ではざっくりとフォントの作成から、Webフォントの使い方までを書く。

できるだけざっくり書くので、実際の方法はググると良い。

全体の流れ

1. フォントの画像を作成する
2. Inkscapeで画像をSVGにしてSVGフォントとして出力する
3. Fontforgeを使って変換する
4. 利用する

1.フォントの画像を作成する

直接svgを書いたりしないのであれば、フォントの元の画像を作成する。私はsaiで適当に絵を書いた。あとで1000x1000でフォントを作るのでそのサイズで書くとよい。また絵の下端はフォントの下端になるのでちゃんと合わせる。

とか言いつつ私は全然合わせられていない。雑。

2.Inkscapeで画像をSVGにしてSVGフォントとして出力する

フリーのドロー系ソフトのInkscapeを利用して書いた画像を変換する。

インポートで画像を読み込んで、パス＞ビットマップをトレースの色の量子化とかからSVG化する。テキスト＞SVGフォントエディタを開いて、フォントを新規作成してグリフ（フォント一文字分のこと）を追加、マッチング文字列というのがフォントにしたときの文字名だがとりあえずaとかにしておく。

作ったグリフを選択しておいて、選択オブジェクトから曲線を取得ってのを選ぶと取り込める。

下のプレビューテキストの欄にaと打てば、うまくいってればプレビューされる。

マッチング文字はあとでfontforgeで変える。svgで保存する。

3.Fontforgeを使って変換する

なぜか不明だが先頭に黒い四角が入ってしまうので切り取っておく。

目的のフォントのグリフ情報を変更して、Unicode値を私用領域の値に変えておく。Unicodeでは実際の文字のほかに利用者が独自に設定してよい私用領域というのがあって、glyphiconなどでもこの部分のフォントが指定されている。

私用領域はかなり広いが、U+E000からU+F8FFなどがそうだ。これをUnicode値に入れて、値で指定を押せばフォントのマッピングは変更される。

あとは利用する形式でフォントを作成しておく。まともに複数のブラウザに対応させるにはいくつかの形式で出力することになる。ttfとかotfとかeotとかだ。

glyphiconなんかは複数の形式を出力して利用しているっぽい。

4.利用する

@font-face {
  font-family: 'Neko';
  src: url('作成したフォント.ttf') format('truetype');
}

.nekocon{
    font-family: "Neko";
    display:inline-block;
    position: relative;
    top:1px;
}

.nekocon.neko:before{
    content:"\e000";
}        

@font-faceというのはフォントを読み込んで名前に対応させるためのもので、srcに複数書くことで利用できる形式のファイルを自動で選択させることができるらしい。あとはglyphiconの定義ほぼそのまま利用してる。contentに文字コードを入れて、タグを貼るとその位置にアイコンを表示している。

そのまま利用しているので当然だが使い方も同じ。