Glifo は Photoshop で作成したベクターシェイプを Web フォントに変換できるエクステンションです。
上のページの１番下に購入ページへのボタンがあるので、 そこから購入することができます。
使い方
購入 → ダウンロード が完了したら、Photoshop で フォント化するシェイプを作成しておきます。
シェイプは、文字ごとに”シェイプを結合する”などであらかじめ結合して、 一つのレイヤーにまとめておきます。
レイヤー名の前に「*」を付けることで変換される対象となるので、 リネームしておきます。
「*」の後のレイヤー名が CSS で利用する際のクラス名に使われます( .icon-レイヤー名 )。
次に Glifo のパネルを開いて、”Create Icon Font” というボタンを押して、フォルダを指定するだけで、後は勝手にフォント化してくれます。
出力されたフォルダを見てみましょう。 SVG フォント、CSS、 それからドキュメントの html を作成してくれています。
フォントの管理が容易になって、 コーディングするのがとても楽になりそうです。
フォントは SVG のみなので、実際に Webフォントとして利用する場合にはIcoMoonなどで変換する必要があるかもしれません。
文字の割り当て
デフォルトでは これらの文字は Unicode のプライベート領域(文字が割り当てられていない)の文字にあてられています。
「>」を使うことで任意の文字に割り当てることもできます。
「*layer >A」 のようにレイヤー名をつけると、「A」という文字で扱えるようになります。
中マドが反映されないバグ
ダウンロードした際に一緒に入っているドキュメントの中にも書いてありますが、 中マドを使ってシェイプを合成していると、 中マド部分が反映されず、塗りつぶされてしまうことがあるようです 。 以下 で 解決法の映像が紹介されていますが、 一応メモ書きもしておきます。
Glifo - Fixing paths from Norm on Vimeo.
解決法
シェイプの内側の要素(中マドになっている部分)を「パスコンポーネントツール」で全て選択、 一度切り取りします。
その後、外側の要素を同じく「パスコンポーネントツール」で選択し、 シェイプを結合を選択。
先ほど切り取った部分をペーストして元に戻す。
これで中マド部分も出力に反映されるようになるようです。
