WebView でアプリ同梱のフォント (Web フォント) を使う #win8dev_jp

結論を先に書いておくと、 NavigateToString メソッドではまともに使えません。 Navigate メソッドなら WOFF で可。

Windows ストア アプリの WebView コントロールを使ってアプリ内に用意した HTML を表示するとき、 システムに存在しないフォントを使いたくなることがあるわけですな。 「メイリオはカンベンしてほしい、 IPA フォント使わせろ～」 とか f(^^;

ちなみに、 XAML で使うのは難しくありません。 日本語フォントでも無問題。
⇒ 「WinRT／Metro TIPS：フォントをアプリに埋め込むには？［Win 8／WP 8］」

ところが、 WebView の中は IE のサブセットですから、 XAML でのやり方ではダメで、 Web フォントを使う方法になります。 で、 フォントの置き場所がインターネット上にあるならば、 Web フォントを使う技術は (たぶん) 全部使えるのだけれど、 アプリ同梱のフォントとなると、 ms-appx-web:/// 配下に置いたものしか WebView は読み込んでくれないわけで、 その制限下で使える方法はどうやら次の 2通りのみ。

Windows ストアのフォーラム (英語版) で回答しまくっている Matt Small 氏のブログより。

About WebView and Fonts...
23 Oct 2012

1. Using a WOFF font

2. Using a TTF font

「1. Using a WOFF font」 は、 .ttf を .woff に変換してプロジェクトに入れて、 CSS でそのファイルを参照します。
「2. Using a TTF font」 は、 .ttf を base-64 で文字列に変換して、 CSS 内に埋め込みます。

WOFF に変換して使う

まず、 TrueType フォントファイルを WOFF に変換します。
上記ブログ記事では変換サービスが紹介されてますが、 日本語のデカいフォントはエラーにされちゃう。 ので、 変換ソフトを何か探してください。 私は、 武蔵システムさんの 「WOFFコンバータ」 を使いました。

では、 WOFF に変換した IPA ゴシック フォントをプロジェクトの html フォルダに入れて、 「ビルド アクション」 を 「コンテンツ」 に変更。 そしたら、 HTML ファイルに次のような CSS を書きます (CSS ファイルに書いても OK)。

@font-face {
font-family: 'IPA';
font-style: normal;
font-weight: 400;
src: url(ms-appx-web:///html/ipaexg.woff);
}

で、 あとは使うだけ (^^)

<p style="font-family:IPA;">IPAmjゴシック (woff): ABCDEFG 1234567890 あいう アイウ 試験</p>

これはサクっと表示されます。 実用になります!
…が、 Navigate メソッドでしか使えません。 アプリ埋め込みの HTML を表示するには使えるけど、 動的に生成した HTML ではダメ、 ということです。

base-64 エンコードして CSS に埋め込む

こっちの方法は、 Navigate メソッドでも NavigateToString メソッドでも使えます。 (…英語フォントなら)

まず、 何かオンライン サービスかフリー ソフトを探して、 TrueType フォントファイルを base-64 エンコードしてテキスト ファイルに落としておきます。 そしたら、 次のような CSS を書きます。

@font-face {
    font-family: 'IPAG_embedded';
    src: url(data:application/x-font-woff;charset=utf-8;base64,AAEAAAAUAQAABABAQkFTRYWPk+ (……中略……) HoAlQCsALQDAAAA) format('woff'),
    url('IPAmjGothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

上の「AAEAAAAUAQAABABAQkFTRYWPk+ (……中略……) HoAlQCsALQDAAAA」には、 base-64 にエンコードしたフォント ファイルのデータが入ります。

で、 あとは使うだけ…

<p style="font-family:IPAG_embedded;">IPAmjゴシック (CSS): ABCDEFG 1234567890 あいう アイウ 試験</p>

これで万々歳かと言うと…。

欧文フォントなら、 これをやっても数十 KB 程度です。 表示に掛かる時間も、 気付かないほどです。
ところが、 日本語フォントでこれをやると… IPA ゴシックでは 8MB 近くになっちゃいました。 表示するときに数秒程度待たされます。 しかもやっかいなことに、 改行無しの数 MB ものテキストファイルは、 メモ帳でも Visual Studio のエディタでも、 まともに扱えません (秀丸バンザイ!)。

ということで、 結論

Navigate メソッドなら WOFF が使える。 NavigateToString メソッドでは、 日本語フォントはちとムリ。

Windows 8.1 に期待、 ってとこですね f(^^;