SVGフォントでIVSを表示するテスト

技術

SVGフォントでIVSが表示できれば幸せになれるんじゃないか。

手順

1. IVS対応フォントの入手
とりあえずテストのためグループ:IVSテスト - GlyphWikiを使う。
2. FontForgeでSVGフォントの出力
ダウンロードしたttfフォントを開いてSVGフォントとして出力、で済めばよかったのだけれども、使っているfontforge 20090923だと修正が必要みたい。
具体的には

  • 「<glyph glyph-name="u10C000" unicode="&#x4e08;" unicode="&#xe0100;" 」と出力されているので(たぶんバグ)、「<glyph glyph-name="u10C000" unicode="&#x4e08;&#xe0100;" 」に修正。「;" unicode="」を「;」に置き換えする。
  • 「<svg>」を「<svg xmlns="http://www.w3.org/2000/svg">」に修正。

3. SVGから使ってみるテスト

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 192" preserveAspectRatio="xMinYMin">
<defs>
  <font-face font-family="gw062932">
    <font-face-src>
      <font-face-uri xlink:href="gw062932.svg#gw062932" />
    </font-face-src>
  </font-face>
</defs>
  <text x="20" y="70" font-size="64" font-family="gw062932">&#x7bc0;&#xe0100;&#x7bc0;&#xe0101;&#x7bc0;&#xe0102;</text>
  <text x="20" y="150" font-size="64" font-family="gw062932">葛&#917760;葛&#917761;</text>
</svg>

4. HTML/CSSから使ってみるテスト

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@font-face {
  font-family: gw062932;
  src: url(gw062932.svg#gw062932) format("svg");
}

p{
    font-family: gw062932;
    font-size: 64pt;
}
</style>
</head>
<body>
<p>&#x7bc0;&#xe0100;&#x7bc0;&#xe0101;&#x7bc0;&#xe0102;</p>
<p>葛&#917760;葛&#917761;</p>
</body>
</html>

結果

WebKitを使ったブラウザ(Google Chrome、Midori)での表示が確認できた。
SVG

HTML/CSS

FirefoxはまだSVGフォントに対応していない。
2月21日追記 http://dl.dropbox.com/u/1224536/svg/test.htmlで確認できます。
2月21日追記 Operaでも確認したところ、SVGで使った場合だけ期待通り表示された。