グリフウィキで外字を使おう

グリフウィキ (GlyphWiki) とは

　つい最近、知人から「グリフウィキ」 (GlyphWiki) なるウェブサイトの話を聞いた。グリフウィキとは明朝体の漢字グリフ（漢字字形）を登録・管理し、皆で自由に共有することを目的としたウィキ (メインページ - GlyphWiki, 閲覧) だそうだ。誰でも自由に字形を作り、作った字形を利用することができる。 CSSを使えばウェブページ上で表示することも可能である。使いたいグリフを「グループ:全漢字」などのページや検索機能を使って探し出して、そのフォントのデータのURLを見つけてくればいい。

　例えば次のような文字を表示することができる。

〓〓入学おめでとう！

「〓〓」は「慶應」、つまりは「慶應大学」の意味である。 この「〓」の字形のデータは"http://glyphwiki.org/glyph/nihon-no-kanji-12401.ttf"から取得している。フォントのデータの「〓」の項に「〓」のグリフが当てられている。 CSSで次のようにWebフォントの設定をすればウェブページ上でもこれらの特殊なグリフを表示させることができる。

@font-face{
	font-family:"glyphwiki-kei";
	src:url("http://glyphwiki.org/glyph/nihon-no-kanji-12401.ttf");
}

@font-face{
	font-family:"glyphwiki-ou";
	src:url("http://glyphwiki.org/glyph/nihon-no-kanji-12402.ttf");
}
<span style="font-family:'glyphwiki-kei';">〓</span><span style="font-family:'glyphwiki-ou';">〓</span>入学おめでとう！

　上記のようにCSSを使ってウェブ上にあるフォントファイルに名前をつけてURLを指定することで、ブラウザにフォントファイルをダウンロードさせて指定の名前と紐付けさせることが可能である。 @font-faceでfont-familyプロパティにフォントの名前を、srcプロパティにフォントファイルの情報を指定する。 それからCSSのfont-familyプロパティに名付けたフォントの名前を指定することで、そのフォントで表示できるようになるというわけである。

色々と遊んでみよう

　グリフウィキには創作漢字などが登録されている。次のように遊んでみることも可能である。

参考文献

いずれのページもに参照した。