iPhoneでWebフォントを使ってみた

数日前に有ったこちらのイベントでiPhoneやiPadでもSVGフォントであればWebフォントが使えると聴きました。

WDE ex -Vol10 『Webフォントの未来』 : ATND
http://atnd.org/events/4396

スライド
https://docs.google.com/viewer?url=http:%2F%2Fpeople.mozilla.org%2F~jdaggett%2Fwebfontsfuture.pdf

ずっと試したかったのですがやっと試せました。こちらで試せます(※アルファベット小文字と数字、一部の記号しか表示されません)。iPhoneまたはiPadのSafariでアクセスしてみて下さい。

以前もiPhoneでWebフォントを試してみた事は有ったのですがTrueTypeフォント、OpenTypeフォントでテストしてダメだったのでその2つに対応してないので「こりゃ対応してないな」と判断してそれ以上テストしてませんでした。イベントでの話ではSVGフォントはAcid3のテスト項目なので…… そういう事みたいですw

SVGフォントの作り方

今回はこちらの「Ubuntu Title」というフォントを以下の @font-face Generator を使って変換しました。

Font Squirrel | Create Your Own @font-face Kits
http://www.fontsquirrel.com/fontface/generator

手順はこちら
1. 「Add Fonts」ボタンを押し、変換したいフォントをアップロード。
2. EXPART に変更。

3. FontFormats の項目をSVGのみチェック。

4 . ダウンロードボタンでDL。

DLしたものはサンプルのHTMLの形になっており、これをSafariなどSVGフォントに対応するブラウザのアドレスバーにドラックするか、サーバにアップしてiPhoneなどですぐに確認する事ができます。

今回使用した「Ubuntu Title」というフォントのライセンスは「Public domain / GNU GPL - 2」なので問題ないですが基本的にフォントデータの変換やWebサーバ上に設置するのを禁止している様なフォントがほとんどです。

自分で試してみるときはライセンスをしっかり確認し、問題無い事を確認した上で試して下さい。

関連情報

以下のサイトにてSVGファイルで縦書きテキストを描画をしている方が居るのですがこちのサンプルもiPhoneでちゃんと縦書き表示されました。iPhone向け電子書籍をSVGファイルで作って縦書きで表示させるという事もできそうです。

M+ フォントをWebページ上で表示（サンプル）
http://sie.sourceforge.jp/mplussample.html

Webフォント関連のエントリー一覧

http://www32.atwiki.jp/nakamura001/?page=%E3%83%88%E3%83%83%E3%83%97%E3%83%9A%E3%83%BC%E3%82%B8%2F%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%2FWeb%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88