Web Fonts で SVG Fonts を利用する

2009年12月5日 土曜日

SVG Fonts は @font-face と font-famiry プロパティーを使い、SVG で定義した図形をグリフとして利用できる SVG の仕組みで、このことは Fonts – SVG 1.1 – 20030114 に書かれていています。最近では @font-face を使えば　SVG の中だけではなく、HTML 文書内のテキストにも SVG Fonts を適用できるよになってきました…ので試してみました。

現状では OPERA と Webkit が対応しています。また、Firefox は 3.7 以降で対応するようです。

• demo (現時点では Webkit 系、OPERA のみで動作します)

結果を比較すると次の通り。

使い方や作り方など

CSS 側の準備

@font-face {
  font-family: MyFont;
  src: url(font.svg#myFont) format("svg");
}

p{font-family:MyFont;}

のようにごく普通に WebFonts を適用するためのコードを書くだけです。ただし、このとき、fotmat("svg") を指定しておかないと Opera 10 では表示できませんでした。

SVG 側でのグリフの定義

各グリフはSVG で

<glyph unicode="マッピングする文字" horiz-adv-x="横幅" d="パスデータ" />

のように定義し

<glyph unicode="あ" horiz-adv-x="300" d="M 0,0 L 0,100 L 100,100 L 0,0 z" />
<glyph unicode="い" horiz-adv-x="300" d="M 100,100 L 0,100 L 0,0 L 100,100 z" />

のように書きます。

マッピングする文字は1文字に限らず、複数の文字の連なりにもマッピングをすることができます。 この場合は単純に unicode 属性の値に複数の文字列を指定し、

<glyph unicode="三角形" horiz-adv-x="300" d="M 100,100 L 0,100 L 0,0 L 100,100 z" />

のように書きます。これならロゴなどにも使えそうですね。また、絵文字のようなこともできちゃいます。

ほかにも x height やアセンダーなどの設定も行えます。これならだれでもテキストエディターさえあればグリフをつくれますね !! 自分は Inkscape を使いグリフを作りましたが…。

ちなみにこのネタは 第 11回 Sugamo.css に持ち込むために作ったネタです。まだまだこっそりと続けていますよー。

その他参考リソース

• Opera Presto 2.2 と Opera 10 概観 – Opera Developer Community
• Mozilla SVG Update: SVG Priorities in Firefox 3 : Firefox 3 には実装されていない。3には間に合わなかった機能とされているみたい。
• UNICODE RANGE GENERATOR : Unicode Range を調べるのに便利