computerと入力するとパソコン型のアイコンが現れる。不思議であるだけでなくSEO面でも機能的であったことから “Symbolset” というアイコンWebフォントが話題に上ったことは、まだ記憶に新しいと思います。

これはOpenTypeフォントが多くの言語の複雑な文字表記をサポートするために定められたグリフ置換（GSUB）テーブルの中にある、合字（Ligature）の仕組みを利用した画期的なものでした。

文脈依存置換

同様のアイデアで今度は「時刻」を「時計」として表示するフォント “Timepiece Rounded” が登場しました。これは合字ではなく、同じグリフ置換テーブル中の文脈依存置換（Contextual Alternates = Calt）を利用したフォントです。文脈依存置換は一般的にはアルファベットの筆記体の接続などに用いられる仕様のようですね。

CSSのfont-familyにこのフォントを指定した要素内で、「17:23:25」のように時刻を表すフォーマットで文字列を入力すると、これが置換され時計が表示されます。一つの時計のアイコンのようにも見えますが、複数の、時計の部品の形をしたグリフが組合わさったものとして理解して良さそうです。HTML中のソースコードはもちろん元の「17:23:25」のままですから、JavaScriptで一定時間ごとに元の文字列の更新を行えば、デモにあるような時計が動いている表現も簡単に実装が可能というわけです。

制作されたのは

1. The Future Is Near
2. Miss Swiss
3. Blackförest

の3種のフォントで、それぞれに異なる時計の盤面デザインを実現しています。このうちThe Future Is Nearのみ現在OpenTypeフォントとして無償ダウンロードが可能になっています。OpenTypeしか用意されていないのはグリフ置換テーブルがOpenType固有の仕様であるからでしょう。

グリフ置換テーブルを使うとアイデア次第でまだまだ面白いフォントが作れそうですね。

FYI

合字フォントを作ってみたいという方は@kudakurageさんのこちらの記事が大変参考になると思います。