Hatena::ブログ(Diary)

M59の記録 Twitter

2010年01月31日

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 ChromeMidori)での表示が確認できた。

SVG

f:id:mandel59:20100131211718p:image

HTML/CSS

f:id:mandel59:20100131213717p:image

FirefoxはまだSVGフォントに対応していない。

2月21日追記 Dropbox - 404で確認できます。

2月21日追記 Operaでも確認したところ、SVGで使った場合だけ期待通り表示された。

kamichikamichi 2010/02/21 11:25 このWebKitはubuntuのパッケージでしょうか、それとも自分でビルドしたものでしょうか。手元ではSVGフォントがうまく使われず表示ができないのですが…

mandel59mandel59 2010/02/21 14:32 Ubuntu 9.04で試した時は自分でビルドしたものだったと思いますが、Ubuntu 9.10リポジトリのlibwebkit-1.0-2(1.1.15.2-1)とepiphany-browser(2.28.0-4ubuntu1)で表示できることを確認しました。
http://dl.dropbox.com/u/1224536/svg/test.html

kamichikamichi 2010/02/21 16:01 ありがとうございます。表示できました。原因は単純に<svg>の修正を忘れていたためでした…

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/mandel59/20100131/1264941470