A List Apart - for people who make websites

Webページを高速化するテクニックとして急速に普及がはじまっている「シンボルフォント」に関する説明が、A List Apartにおいて「The Era of Symbol Fonts」として掲載された。高トラフィックのWebサイトの中にはすでにシンボルフォントへの移行を済ませたものもあり、今後高速化テクニックとして広く普及する兆しを見せている。

同記事で紹介されているシンボルフォントのテクニックは、合字を活用してカスタムフォントを表示させるというもの。「f」と「i」が連続している場合、合字表示に対応したフォントであれば「fi」という1つのグリフが表示される。合字は自由に作成することができるので、この機能を使って特定の文字列を特定のグリフに対応させようというのが、シンボルフォントの技術上のポイントとなる。たとえば記事ではHomeやContactという文字列を合字として定義し、それら文字列がでてくると家や携帯の形をしたフォントを表示することもできるといった例を紹介している。

現在ではCSSpriteによって画像を単一のデータにすることでデータ配信を高速化する方法が普及しているが、この方法ではMacBook ProやiPhone、iPadのような高解像度ディスプレイで見た場合に汚くなる問題を解決することができない。シンボルフォントはベクタデータであるため、高解像度ディスプレイでも綺麗に表示される。画面をズームしても表示は綺麗なままだ。

ベクタデータということであればSVG+JavaScriptでレンダリングすればよいが、シンボルフォントはフォントレンダリングの枠組みを使っているのでIE6でも問題なく利用でき、SVGを使ったケースよりも対応するブラウザが多い。さらに、フォントのレンダリングに失敗したとしても、意味のある文字列が表示されるので意味的な不一致が発生することもなく、検索エンジンに対しても意味のあるデータを保持できるという利点がある。

シンボルフォントの欠点は、これが単色でしか使えないという点にある。工夫することで2色までつかえるようになるが、基本的には単色しか使えない。マルチカラーフォントの策定も提案されているが、マルチカラーフォントにした場合には、多くのブラウザでレンダリングできるという利点は失うことになる。