2015年2月17日火曜日

キーボードの記号フォント「Keyboard-JP」(n-yujiさん作)をWEBサイトで使う方法

先日、このような記事を見た。

keyboard-font·キーボードを表現した記号フォント MOONGIFT

元々はn-yujiさんの作品だ。

n-yuji/keyboard-font

ボタンアイコンのツールチップなどでのキーボードショートの説明に使うのにちょうどいいなと思ってWEBサイトで使ってみようとしたが、正常に表示できるようになるまでに意外と苦労したのでログを残しておこうと思う。

まずはデモ(Keyboard-JP Web Example)。こんな感じの表示になる。


苦労した最大のポイントは「リガチャー」の変換がうまくできなかったこと。

「リガチャー」というのは「合字」のことで、例えば上の例だと「POWER」とテキストで指定した場合に電源マークに変換されるようなことを言う。

最終的なフォント指定のCSSはこれ。ポイントは「font-feature-settings」と「text-rendering」プロパティー。


HTMLはこんな感じ。HTML内では左の列と右の列で同じ文字列を入れているが、ブラウザでの表示は異なることがポイント。


その他にどのような文字を使えるかは、n-yujiさんのオリジナルパッケージ内のPDFを見るとわかる。

ほとんどの文字はリガチャーによって変換されるが、一部の文字、例えばMacのコマンドキーマークは右に「U+2318」と記述されている。HTMLでこれを指定するには「⌘」と指定する。

最後に、IEで表示するためにはWOFFファイルが必要だ。OTFファイルを下記のソフトでWOFFに変換する。

WOFFコンバータ - 武蔵ソフト

上のフォント指定のCSS(Keyboard-JP-Regular.css)にはすでにWOFFファイルの記述もしてあるのでIEでも動作を確認できる。

プロジェクト全体はここでダウンロードできる。

junkoro/Keyboard-JP_WebExample