文字情報基盤 Web 実証実験
テクニカルレポート
実施企業：株式会社 日立製作所
2013 年 7 月 31 日
独立行政法人情報処理推進機構（IPA）
Contents
目次
1 実証実験サイトの前提環境 ... 1 1.1 OS/ブラウザ ... 1 1.2 リソース ... 1 1.3 サーバ構成 ... 1 1.4 クライアント ... 1 2 Web フォントの実装方式 ... 3 2.1 使用する Web フォントのファイル形式 ... 3 2.2 Web フォントの生成方式 ... 4 2.2.1 Web フォントファイルの動的生成 ... 4 2.2.2 Web フォントファイルの静的生成 ... 5 2.2.3 静的生成したWeb フォントファイルでの Web フォント表示可否 ... 9 2.3 Web フォント表示の実装方式 ... 10 2.4 縦組み表示 ... 12 3 Web フォントの表示 ... 13 3.1 OS/ブラウザ表示可能文字範囲 ... 13 3.2 ネゴシエーション方式 ... 17 4 符号化対象外文字の表示 ... 20 4.1 実装方式 ... 20 5 コピー＆ペースト機能 ... 25 5.1 文字のコピー＆ペースト ... 25 5.2 インライン画像のコピー＆ペースト ... 25 5.3 メタデータ（MJ 文字図形名）の埋め込み方式（HTML タグの実装方式） ... 26 6 印刷機能 ... 28 6.1 実装方式 ... 28 6.2 各ブラウザでの Web フォント印刷対応状況 ... 28 6.3 Firefox, Chrome の印刷の不具合 ... 29 6.4 PDF 出力の確認 ... 29 7 ブラウザ依存事象一覧 ... 30 7.1 IE8：CJK 拡張 B が表示されない ... 30 7.2 Win/Opera：CJK 拡張 B が表示されない ... 30 7.3 Mac/Opera：CJK 拡張 A が表示されない ... 30Contents
目次
7.4 IE9 以前：CSS ファイルの読み込み制限が最大 31 ファイル ... 31 7.5 Opera：インライン画像がコピー＆ペーストされない ... 31 7.6 Opera：画面表示と印刷結果が異なる文字が存在 ... 31 7.7 Safari：印刷プレビュー画面で印刷後、画面のボタンが反応しなくなる ... 31 8 スマートフォン（Android, iOS）確認結果 ... 32 8.1 確認結果 ... 321
実証実験サイトの前提環境
実証実験サイトの前提環境は以下の通り。 1.1 OS/ブラウザ Web フォント表示の実験評価の対象とした OS とブラウザは以下の通り。 OS Windows XP, Vista, 7 Mac OS X 10.6.8, 10.7Linux (Fedora 16, Debian 6.0.4) ブラウザ Internet Explorer Firefox Google Chrome Safari Opera 検証で確認したOS とブラウザの組み合わせを表 1 に示す。 1.2 リソース 対象としたリソースは以下の通り。 文字情報基盤 文字情報一覧表 Ver.002.02 IPAmj 明朝フォント Ver.002.01（OpenType フォント） 1.3 サーバ構成 サーバ構成は以下の通り。 WEB/AP サーバ 2 台 DB サーバ 1 台 インターネット側ネットワーク帯域10Mbps 1.4 クライアント クライアントは以下の通り。 クライアントへのプラグインインストール不可 フォントインストールは基本的に不可 1
表 1 検証で確認した OS とブラウザの組み合わせ
# OS バージョン ブラウザ バージョン
1 Windows XP SP3 Internet Explorer 7.0, 8.0
2 Firefox 3.6, 11
3 Google Chrome 18.0
4 Safari 5.1.5
5 Opera 11.61
6 Windows Vista SP2 Internet Explorer 7.0, 8.0, 9.0
7 Firefox 3.6, 11
8 Google Chrome 18.0
9 Safari 5.1.5
10 Opera 11.61
11 Windows 7 SP1 Internet Explorer 8.0, 9.0
12 Firefox 3.6, 11 13 Google Chrome 18.0 14 Safari 5.1.5 15 Opera 11.61 16 Mac OS X 10.6.8 Firefox 3.6, 11 17 Google Chrome 18.0 18 Safari 5.1.1 19 Opera 11.61 20 Mac OS X 10.7 Firefox 3.6, 11 21 Google Chrome 18.0 22 Safari 5.1.1 23 Opera 11.61
24 Debian GNU/Linux 6.0.4 Firefox 3.6, 11
25 Google Chrome 18.0
26 Opera 11.62
27 Fedora Desktop 16 Firefox 3.6, 11
28 Google Chrome 18.0
29 Opera 11.62
2
Web
フォントの実装方式
【目的】 Web フォントの実装方式（使用する Web フォントのファイル形式、生成方法、実証実験 サイトの仕様に合わせた調整）を検討する。 2.1 使用する Web フォントのファイル形式 Web フォントとして使用できるフォントには表 2 のファイル形式が存在し、ブラウザの Web フォント対応状況は表 3 の通りであった。 表 2 Web フォントとして使用できるフォント1 # ファイル形式1 EOT (Embedded OpenType) 2 OpenType
3 SVG Font 4 TrueType
5 WOFF (Web Open Font Format)
表 3 ブラウザの Web フォント対応状況
# ブラウザ EOT OpenType SVG TrueType WOFF
1 Internet Explorer ○ × × × ○(9 以降) 2 Firefox × ○ ○ ○ ○ 3 Google Chrome × ○ × ○ ○ 4 Safari × ○ ○ ○ ○ 5 Opera × ○ ○ ○ ○ （2012/4/1 現在） 表 3 より、WOFF 形式の Web フォントであれば、実証実験サイトで対象とするブラウ ザの内Internet Explorer 7, 8 以外には対応可能である。Internet Explorer 7, 8 に対応する には、EOT 形式が必須である。このため、実証実験では、EOT 形式と WOFF 形式の Web フォントを適用した。
1 http://www.w3.org/TR/css3-fonts/#src-desc
3
2.2 Webフォントの生成方式
一般的に、Web フォントを使用するには、元となるフォントファイルに、Web サービス やコンバータを適用して、Web フォントファイルに変換する必要がある。
実証実験では、IPAmj 明朝フォント（OpenType）を元に Web フォントファイルの生成 を実施した。
EOT 形式と WOFF 形式の Web フォントファイルを生成する方式として、動的に生成す る場合と、静的に生成する場合について検討を行った。 2.2.1 Webフォントファイルの動的生成 【動的生成とは】 実証実験でのWeb フォントファイルの動的生成とは、実証実験サイトで利用者が入力し た文字列をサーバ側で受け取り、利用者が入力した文字列のみを含むようにIPAmj 明朝フ ォント（OpenType）をサブセット化し、そのファイルを Web フォントファイルに変換す ることである。クライアント側には、動的に生成したWeb フォントファイルをブラウザが ダウンロードできるように、CSS 定義を埋め込んだ HTML をレスポンスすることで、Web フォント表示が可能になる。 【検討結果】 動的生成を実現する上で以下の手順を検討した。 ① Web フォント表示に必要な文字を指定すると、元となるフォントファイルから、指定 した文字をサブセット化したフォントファイルを生成する。
② ①のサブセットフォントファイルをWeb フォント（EOT, WOFF）に変換する。 ③ Web フォントの CSS 定義を生成する。 【補足】 実証実験では、動的生成の実装は行わなかった。今後、動的生成を実現するに際には、 オープンソースライブラリの sfntly2を参考にすることで実現できるのではないかと思われ る。 2 http://code.google.com/p/sfntly/ 4
2.2.2 Webフォントファイルの静的生成
【静的生成とは】
実証実験でのWeb フォントファイルの静的生成とは、IPAmj 明朝フォント（OpenType） からWeb フォントファイルをあらかじめ生成しておくことである。 フォントファイルのサブセット化およびWeb フォント変換はサードパーティ製のコンバ ータ（GUI ツール）を適用する。 【検証】 IPAmj 明朝フォントを静的生成方式で Web フォント化するにあたって、適切なデータ量 となるようなサブセット単位を性能面から検討した。 ①転送時間の測定 100Mbps の LAN 上に設置された開発用のクライアント－サーバ間で 6 万字全てを含ん だIPAmj 明朝を Web フォント形式に変換し、Web フォントを表示する HTML を Google Chrome を使用して読み込みレンダリングが完了するまでの時間を測定した。 サンプルリソース HTML(CSS 定義を含む)・・・591Byte └WOFF・・・31,010,156Byte 結果、サンプルHTML のレンダリングが完了となるまでの時間は 42.38s であり、その 中でWOFF のロードに 42.28s 費やしていることが判明した。 ②同時アクセス要件 実証実験用サーバは最大で 500 までの同時アクセスが可能としている。そのため、同時 に500 アクセスを想定した場合 31MB×500=15,500MB のデータ量を転送する必要があり、 100Mbps の回線全てを転送に充てたとしても転送完了までに 1,240s が必要となる。実証実 験用サーバの回線の帯域は10Mbps のため実運用上問題がある。Web フォントのサイズ削 減のためフォントファイルのサブセット化の検討を行った。 ③欧文Web フォントのファイルサイズ
Google Web Fonts サイトでホスティングされている欧文フォントの Web フォントを調 査した。結果として、１ファイルあたりのサイズは数十KB～数百 KB 程度となることが判 明した。上記のサイズであれば転送時間は許容範囲であると判断した。
但し、サブセットの細分化に比例し、実装に費やすコード量が増加することを考える必 要がある。
④サブセット単位の検討 日本語フォントは欧文フォントと違い、全ての字形データを含めてしまうとWeb フォン トのファイルサイズが MB 単位となる。そのため、今回は入力文字列に応じた字形データ を含むサブセットのWeb フォントを返すこととした。 作成するサブセットは、検討結果から0.1MB～0.3MB の範囲で作成することとする。こ の範囲であれば、１ファイルあたり約100～300 文字の字形データを収めることが可能とな る。 サブセット化したWeb フォントファイルのサイズを表 4 に示す。 表 4 サブセット化した Web フォントファイルサイズ # サブセット化内容 EOT[KB] WOFF[KB] 1 サブセット化なし 28,069 30,284 2 BMP 面 2 分割（3005-6944） 2,867 3,160 3 BMP 面 2 分割（6945-FA6D） 3,246 3,551 4 CJK 統合拡張 B 領域 2 分割（20001-25A0D） 3,327 3,618 5 CJK 統合拡張 B 領域 2 分割（25A0E-2A6D6） 3,803 4,070 6 平仮名・片仮名領域（3040-30FF） 216 256 7 CJK 統合漢字拡張 A（3400-4DBF） 1,271 1,387 8 CJK 統合漢字（4E00-9FFF） 460 541 9 CJK 互換漢字（F900-FAFF） 232 273 10 上記以外の BMP 領域 （0000-303F,31F0-33FF,FE10-FFEF） 186 222 11 CJK 統合漢字拡張 B（20000-2A6DF） 354 413 12 CJK 統合漢字拡張 C, D（2A700- 2B81F） 421 487 13 1 文字ずつ分割 2 2 転送時間の実測結果・同時アクセス時の転送量の試算から、ファイルサイズは 0.1～ 0.3MB 程度になるようなサブセット単位が適切であると判断した。また、ファイルサイズ に対するWeb フォント転送時間の目標値として、開発環境において 1.0s～3.0s の間に収ま ることを目標とした。 なお、ファイルサイズを1MB とした場合のロード時間の実測値は約 0.8s(779ms)であっ た。 また、サブセットは文字情報基盤として定義された漢字のほかに、使用頻度の高い平仮 名・片仮名を個別に切り出すことで不要データの転送量の削減を図った。 6
【実証実験のコンテンツ内容を考慮した対策】 実証実験サイトは、利用者が入力した名前や住所を、Web フォントで表示する機能を備 えている。この名前や住所として入力される文字列を「漢字」と「非漢字」に分けて検討 を行った。 漢字については、利用者が入力する漢字は1 文字 1 フォントファイルとして作成した。 コードレンジを指定してフォントファイルを作成する方式も検討したが、表示時に不要な フォントもロードすることになり、ネットワーク上のオーバーヘッドが考えられた。その ため、1 文字 1 フォントファイルとして作成する方式を採用した。 非漢字については、住所は番地が数字で入力される、マンション名がカナで入力される といったように入力が多くなると想定された。非漢字を1 文字ずつ Web フォントとして作 成し、表示時に割り当てるより、非漢字は 1 つのフォントファイルにまとめた方が処理性 能が良く、また、１ファイル当たり250KB でありネットワーク上許容できる範囲内のサイ ズであると判断した。 【採用した方式】 ・漢字（非漢字以外の文字）は 1 文字毎にフォントファイルとして作成する（ファイルサ イズ：約2KB） ・非漢字は1 つのフォントファイルとして作成する（ファイルサイズ：約 250KB） 漢字・非漢字ともに、コンバータを使用してEOT と WOFF 形式のフォントファイルに 変換する。 【転送時間の測定】 実証実験サイトでの1 文字の Web フォントの転送時間の計測を以下の環境で行った。 クライアント － プロキシ － インターネット － サーバ 100Mbps 10Mbps 【転送時間の測定対象・方法】 実証実験サイトの名刺の作成体験の名前入力の名前に 1 文字を入力し、表示ボタンをク リックしてから、画面の表示が完了するまでの間をGoogle Chrome を使用して測定し、そ の中からWeb フォントの転送にかかった時間（リクエスト送信から受信完了まで）を取得 した。1 回の測定ごとにブラウザのキャッシュはクリアして計測した。 7
表 5 1 文字の Web フォントの転送時間 領域 サイズ 転送時間 1 回目 2 回目 平均 平仮名・片仮名領域 157.94KB 37ms 45ms 41ms CJK 統合漢字拡張 A 2.13KB 89ms 29ms 59ms CJK 統合漢字 1.60KB 60ms 26ms 43 ms CJK 互換漢字 2.12KB 77ms 30ms 54 ms CJK 統合漢字拡張 B 1.84KB 29ms 39ms 34 ms CJK 統合漢字拡張 C 2.15KB 78ms 71ms 75 ms CJK 統合漢字拡張 D 1.82KB 145ms 35ms 90 ms 【転送時間の測定の結果評価】 開発環境では100Mbps の帯域でファイルサイズ 0.1～0.3MB の場合、1.0～3.0s の転送 時間を目標としていた。実環境の10Mbps の帯域で考えると単純計算でファイルサイズ 0.1 ～0.3MB では、10.0～30.0s の転送時間が目標となるが、実際のファイルサイズは、2KB 前後のため、10Mbps で 0.2s 前後の転送時間が実環境での目標値となる。 ファイルの転送時間の実測値の平均は0.034～0.090s のため目標値は十分に達成された。 【コードレンジでサブセット化したWeb フォントを採用する場合の課題】 コードレンジでサブセット化したWeb フォントを採用する場合、どのコードレンジでサ ブセット化するのか、サブセット化したWeb フォントの転送量の検討が必要である。 たとえば、JIS 第 1・第 2 水準の漢字しか使用しないシステムであれば、JIS 第 1 水準と JIS 第 2 水準の漢字のコードレンジでサブセット化する、あるいは、JIS 第 1・第 2 水準の 漢字をまとめてサブセット化するなど、Web フォントを使用するシステムに応じたサブセ ット化を検討する必要がある。 【1 文字ずつサブセット化した場合の課題】 実証実験では、1 文字ずつサブセット化した Web フォントを採用したが、IPAmj 明朝フ ォントVer.001.01 から Ver.002.01 へのバージョンアップ時に EOT, WOFF の全 Web フォ ントファイルを作成しなおす必要がある。
Web フォントファイルが作成できているかどうかを 1 文字ずつ確認する必要があり、作 成、テストのコストが膨大となる。
2.2.3 静的生成した Web フォントファイルでの Web フォント表示可否 【目的】 静的生成したWeb フォントファイルを使用して Web フォント表示可能かを確認する。 【検証】 静的生成したWeb フォントを使用して、Web フォントの表示可否についてサブセット化 していないWeb フォントと、1 文字ずつサブセット化した Web フォントを対象に確認を行 った。 【検証結果】
サブセット化していないWeb フォントの場合、Internet Explorer と Google Chrome で Web フォント表示できないことが判明した。Firefox については、Web フォントファイル サイズの上限をチェックする設定を無効にした状態であればWeb フォント表示できること が確認された。 1 文字ずつサブセット化した Web フォントを使用した場合は、5 種類のブラウザ全てで Web フォント表示できることが確認された。確認結果を表 6 に示す。 表 6 Web フォントのファイルサイズとブラウザごと表示可否 # OS ブラウザ バージョン サ ブ セ ッ ト化なし サブセット 化（1 文字分 割） 1 Windows XP SP3 Internet Explorer 8.0 × ○ 2 Windows XP SP3 Firefox(*) 11.0 ○ ○ 3 Windows XP SP3 Google Chrome 18.0 × ○ 4 Windows XP SP3 Safari 5.1.5 ○ ○ 5 Windows XP SP3 Opera 11.61 ○ ○ (*)Firefox は Web フォントファイルのサイズの上限をチェックする設定を無効にした状態
【サブセット化なしのWeb フォントを採用する場合の課題】
表 6 より、サブセット化なしの Web フォントを採用する場合は、Web フォントが Internet Explorer と Google Chrome で表示されない原因の調査を行う必要がある。調査観 点として、ブラウザにWeb フォントファイルのサイズ制限があるのか、Web フォントをダ ウンロードできているのか、という点が挙げられる。
2.3 Webフォント表示の実装方式
Web フォントを使用するために CSS3 の@font-face ルール3で、使用するWeb フォント
にフォント名を定義し、実際にWeb フォント表示する文字の span タグに対して、先に定 義したWeb フォント名を使用する CSS クラスを指定する。 @font-face と CSS のクラス定義 <style type="text/css"> <!-- // Webフォントの名前を MJ029195 と定義 @font-face { font-family: MJ029195; src: url(/ipapro/webfont/MJ029195.eot?) format('embedded-opentype'), url(/ipapro/webfont/MJ029195.woff) format('woff'); } // Webフォント表示用のクラスセレクタ定義 span.MJ029195 { font-family: MJ029195; } --> </style> // classに上で定義したクラスセレクタ MJ011648 を指定することで Web フォント表示さ れる <span class="MJ011648">情</span> 【補足】
上記の@font-face の定義では、EOT 形式と WOFF 形式の Web フォントを同時に記述し ているが、2 種類の Web フォントが両方ともダウンロードされるわけではなく、実際は、 ブラウザが対応している形式のWeb フォントがダウンロードされる。
上記の@font-face の定義で、ブラウザがダウンロードする Web フォントの確認結果を表 7 に示す。Internet Explorer 9 は EOT/WOFF 形式の両方に対応しているが、EOT が先に 記述されているためEOT がダウンロードされる。
3 http://www.w3.org/TR/css3-fonts/
10
表 7 上記@font-face 定義で実際にダウンロードされるフォント
# OS ブラウザ バージョン EOT WOFF
1 Windows Vista SP2 Internet Explorer 7.0 ○ ×
2 Windows 7 SP1 8.0 ○ × 3 9.0 ○ × 4 Firefox 3.6 × ○ 5 11 × ○ 6 Google Chrome 18 × ○ 7 Safari 5.1 × ○ 8 Opera 11.61 × ○ （2012/12/27 現在） 【静的生成で1 文字ずつ Web フォント作成したことによる問題と対策】 開発当初は1 つの Web フォントファイルごとに 1 つの CSS ファイルを用意し、表示す る文字に対応するCSS ファイルを読み込む方式を検討していた。しかし、Internet Explorer 9.0 以前は外部の CSS ファイルを読み込める上限値は最大 31 個までという制限のため、最 大31 文字までしか Web フォントが表示されないことが判明した。 このため、1 文字ごとに CSS ファイルを用意するのではなく、表示する文字の@font-face ルールとクラスセレクタを動的に生成し、1 つの style タグ内に埋め込む方式に変更した。 11
2.4 縦組み表示 【目的】 縦組み表示でWeb フォントの表示可否について確認する。 【検証】 Web フォント表示可否を確認する前に、縦組み表示自体が可能か実験を行った。以下の CSS プロパティを適用した。 【検証結果】 このCSS プロパティを適用した場合、縦組み表示されたのは Internet Explorer のみで あった。 使用したCSS プロパティ style='writing-mode: tb-rl; direction: ltr;' 表 8 縦組み表示確認結果 # OS ブラウザ 縦組み表示
1 Windows XP SP3 Internet Explorer 8.0 ○ 2 Windows XP SP3 Firefox 11.0 × 3 Windows XP SP3 Google Chrome 18.0 × 4 Windows XP SP3 Safari 5.1.5 × 5 Windows XP SP3 Opera 11.61 ×
（2012/3/2 現在）
【課題】
Internet Explorer での Web フォントでの縦組み表示と、Internet Explorer 以外のブラ ウザの縦組み用のCSS プロパティ（ブラウザの独自実装 CSS プロパティ）の調査、及び縦 組みでのWeb フォント表示可否の検証が必要である。
3
Web
フォントの表示
3.1 OS/ブラウザ表示可能文字範囲
【目的】
実証実験で対象とするOS とブラウザの組み合わせごとに Web フォントの表示可否につ いて確認を行う。対象OS は Windows, Mac OS, Linux、対象ブラウザは Internet Explorer, Firefox, Google Chrome, Safari, Opera である。
【検証方法】 文字の領域ごとに代表1 文字をブラウザでサンプル表示し Web フォントの字形での表示 可否について確認を行う。Web フォントは IPAmj 明朝フォントから生成したものを使用す る。サンプル表示に使用する文字を表 9 に示す。 表 9 Web フォント表示確認でサンプル表示した文字 # 面 領域 コードレンジ Unicode/IVS 字形 1 BMP （基本多言 語面） 平仮名・片仮名 3040-30FF 3042
あ
2 CJK 統合漢字拡張 A 3400-4DBF 39AC 3 CJK 統合漢字 4E00-9FFF 4E00 4 CJK 互換漢字 F900-FAFF F91D 5 上記以外の領域 0000-303F 31F0-33FF FE10-FFEF 0100Ā
136 SIP （追加漢字 面） CJK 統合漢字拡張 B 20000-2A6DF 2000B 7 CJK 統合漢字拡張 C 2A700-2B73F 2AD00 8 CJK 統合漢字拡張 D 2B740-2B81F 2B740 9 IVD 基底文字はCJK 統 合漢字拡張A - 3691_E0102 10 基 底 文 字 は CJK 統合漢字 - 908A_E010A 11 基底文字はCJK 互 換漢字 - N/A - 12 基底文字はCJK 統 合漢字拡張B - 21706_E0102 13 基底文字はCJK 統 合漢字拡張C - 2B8EF_E0102 14 基底文字はCJK 統 合漢字拡張D - N/A - 凡例 N/A:対象領域に IVS なし 【検証結果】 BMP、CJK 統合漢字拡張 B, C, D、IVD の 3 領域の Web フォント表示可否のパターンを 表 10 に示す。 表 10 Web フォント表示可否パターン # パターン BMP CJK 統合漢字拡張 B, C, D IVD 1 A Web フォント表示可 Web フォント表示不可 2 B Web フォント表示可 Web フォント表示不可 3 C Web フォント表示可 14
OS とブラウザの組み合わせが表 10 のパターン A～C のどれに対応するのかを表 11 に 示す。
表 11 OS とブラウザの組み合わせごとの Web フォント表示可否パターン対応
# 対象ブラウザ 対象OS
Windows Mac OS X Linux XP SP3 Vista SP2 7 SP1 10.6.8 10.7 Debian 6.0.4 Fedora 16 1 Internet Explorer
7.0 B B N/A N/A N/A N/A N/A 2 8.0 B(*1) B(*1) B(*1) N/A N/A N/A N/A
3 9.0 N/A B C N/A N/A N/A N/A
4 Firefox 3.6 B B B B B B B
5 11 C C C C C C C
7 Google Chrome
18.0 B B C C C(*4) B B
8 Safari 5.1 A A A B B N/A N/A
9 Opera 11.61 B(*2) A A A(*3) A(*3) B B 凡例 N/A:OS とブラウザの組み合わせが存在しない （2012/5/23 現在）
一部の組み合わせでのWeb フォント表示可否の例外的な事象を以下に列挙する。 (*1) Internet Explorer 8.0 は CJK 統合漢字拡張 B の文字が Web フォント表示されない。
指定したWeb フォントではなく、ブラウザのデフォルトのフォントで表示される。 (*2) Windows XP の Opera は CJK 統合漢字拡張 B の文字が Web フォント表示されない。
指定したWeb フォントではなく、ブラウザのデフォルトのフォントで表示される。 (*3) Mac OS X 10.6, 10.7 の Opera は CJK 統合漢字拡張 A の文字が Web フォント表示さ
れない。
(*4) Mac OS X 10.7 の Chrome は CJK 統合漢字拡張 B, C の IVD の文字が Web フォント 表示されない。
IVD の文字の Web フォント表示ができない OS/ブラウザの組み合わせで IVS を表示した 場合、以下のように表示される。
確認環境：Windows Vista SP2 Internet Explorer 8.0 （2012/5/23 現在） 凡例 Web フォント有：Web フォト表示
MJ 文字図形画像：文字画像表示 Web フォント無：フォント指定なし
【課題】 検証の結果、OS とブラウザの組み合わせごとに Web フォント表示可能な文字範囲が異 なることが判明した。 Web フォント表示不可能な文字範囲の文字の扱いとして、 ①そのまま表示する ②文字画像で表示する という2 つの方法を検討した。①の場合、IPAmj 明朝の字形とは異なる字形で文字が表 示されてしまう。②の場合、IPAmj 明朝の字形で表示される。 IPAmj 明朝の字形を正しく表示するため②の方法を採用した。②の方法の採用にあたり OS とブラウザの組み合わせの判定を行う必要がある。その方法として 3.2 のネゴシエーシ ョン方式を採用した。 3.2 ネゴシエーション方式 【OS とブラウザの組み合わせを判定するための対策】 OS とブラウザの組み合わせの判定は HTTP リクエストの User-Agent ヘッダを基に OS/ ブラウザを判定する。ブラウザから送信されたHTTP リクエストの User-Agent ヘッダを 解析しクライアントのOS の種類とそのバージョン、ブラウザの種類とそのバージョンを取 得し、その情報をキーに表 12 に示すネゴシエーションテーブル（表 11 の OS とブラウザ の組み合わせに対する表示パターンをCSV 形式で保存したファイル）を検索し、対応する 表示パターンを取得する。この対策を以降ネゴシエーション方式と呼ぶ。 表 12 ネゴシエーションテーブルのフォーマット（IE/Windows の場合） # ブラウザ 種類 ブラウザ バージョン OS 種類 OS バージョン 表示 パターン 備考 1 IE 7.0~8.0 WINDOWS 5.1 B XP 2 IE 7.0~8.0 WINDOWS 6.0 B Vista 3 IE 8.0~9.0 WINDOWS 5.1 A XP 4 IE 8.0~9.0 WINDOWS 6.0 A Vista 5 IE 8.0~9.0 WINDOWS 6.1 B 7 6 IE 9.0 WINDOWS 6.0 B Vista 7 IE 9.0 WINDOWS 6.1 C 7 17
【実証実験サイトでの表示パターン】 ネゴシエーション方式で使用する表示パターンについて、実証実験では、Web フォント 表示する文字の範囲をBMP 領域、CJK 統合漢字拡張領域、IVD 領域、符号化対象外文字 の4 つの範囲に分け、OS とブラウザの組み合わせに応じて表示する Web フォントを表 13 のパターンで表示する方式とした。符号化対象外文字については後述する。 実証実験の目的であるWeb フォントの体験ができることを優先するため、表 11 で列挙 した一部の例外（(*1)IE 8 では CJK 拡張 B の文字が Web フォント表示されない、 (*2)Windows XP の Opera は CJK 統合漢字拡張 B の文字が Web フォント表示されない等） があるものの、OS とブラウザの組み合わせと表示パターンの対応付けは表 11 のままとし た。 表 13 実証実験サイトの表示パターンと対応する文字範囲 # 表示 パターン BMP （0000-FFEF） CJK 統合漢字拡張 B, C, D （20000-2B81F） IVD 符号化 対象外 1 A Web フォント 文字画像 2 B Web フォント 文字画像 3 C Web フォント 文字画像 4 N Web フォント 文字画像 凡例 Web フォント：文字を Web フォントで表示 文字画像：文字をインライン画像で表示 N：Web フォント表示についてはパターン A と同じであるが、実証実験サイトにア クセスしたクライアント環境がネゴシエーションテーブルに存在しない場合、サ イト上でWeb フォントに対応していない旨のメッセージを表示する。 【ネゴシエーション方式の結果】 ネゴシエーション方式を採用した結果、表 11 で列挙した一部の例外はあるものの、クラ イアント環境（OS とブラウザの組み合わせ）に応じて適切な Web フォントと文字画像表 示の切り替え表示を行うことを可能とした。 18
【実証実験サイトの課題】 Web フォント表示を優先させたため、表 11 で列挙した一部例外を無視する表示パター ンを適用した。このため、たとえば、表 11 で列挙した例外(*3)の CJK 統合漢字拡張 A が 表示されないOS とブラウザの組み合わせの場合、CJK 統合漢字拡張 A の文字は Web フォ ントの字形では表示されず、ブラウザのデフォルトフォントの字形で表示されてしまう。 文字の字形を正確に表示するためには、BMP、CJK 統合漢字拡張(B, C, D)の範囲を CJK 統合漢字拡張A、CJK 統合漢字、CJK 互換漢字、CJK 統合漢字拡張 B、CJK 統合漢字拡 張C、CJK 統合漢字拡張 D に細分化し、表示パターンを詳細化することで、Web フォント 表示されない範囲の文字のみ画像表示する必要がある。 【ネゴシエーション方式の課題】 HTTP リクエストの User-Agent ヘッダの解析において、想定外の User-Agent ヘッダの ためOS の種類とバージョン、ブラウザの種類とバージョンが取得できず、ネゴシエーショ ンテーブルを検索できない場合、表示パターンN とした。表示パターン N では BMP 領域 のみをWeb フォント表示し、それ以外の領域を文字画像で表示する。本来 Web フォント表 示可能なOS/ブラウザであっても表示パターン N と判定されると、BMP 領域以外の文字が Web フォントではなく文字画像で表示されてしまう。 User-Agent ヘッダの解析方法として正規表現を適用しているが、この正規表現をハード コーディングしているため、想定外のUser-Agent ヘッダに対応するには、ソースを修正す る必要がある。ソースを修正する場合、コーディング、テスト、サーバリソースの入れ替 えなど手間がかかる。今後、新しいOS やブラウザが登場した際の User-Agent ヘッダに容 易に対応するためには、正規表現を外部ファイルに設定する方式に変更する必要がある。 19
4
符号化対象外文字の表示
符号化対象外文字 4とは、文字情報基盤漢字（58,813 文字）の内、符号化されていない 6,789 文字のことである（2012 年 6 月時点）。符号化対象外文字は、IPAmj 明朝フォントに 図形データとしては搭載されているが、符号化されていないため、文字コード（Unicode） によって呼び出すことができない。 このため、符号化対象外文字はWeb フォントではなく、文字画像を使用して表示する方 式を採用した。文字画像を使用するため、Web フォント表示する文字列中に符号化対象外 文字をインライン表示させることとした。 4.1 実装方式 文字画像のファイル形式はPNG 形式を採用した。表 14 に文字画像ファイルの形式を示 す。 表 14 文字画像ファイルの形式 # 項目 内容 備考 1 ファイル名 MJ 文字図形名.png 例：mj000001.png 2 ファイルサイズ 1～17KB 3 解像度 64×64px 2012 年 6 月～8 月 128×128px 2012 年 8 月～ 【文字画像単独での表示】 符号化対象外文字の文字画像を<img>タグで表示する単純な HTML 実装は以下のように なる。 <img src="/ipapro/img/mj029194.png"> 【Web フォント表示する文字列中でのインライン表示】 Web フォント表示する文字列中に符号化対象外文字をインライン表示する単純な HTML 実装は以下のようになる。 <span>情</span><img src="/ipapro/img/mj029194.png"><span>情</span> 4 http://ossipedia.ipa.go.jp/ipamjfont/faq/ipamjm_imp.html 20この実装の場合、Web フォント表示する文字のフォントサイズと文字画像のサイズの調 整を行っていないため、以下のように、不自然なインライン表示となる。 // ブラウザ表示結果 （確認環境：Internet Explorer 8, 画面解像度 1280x1024） Webフォント表示する文字のフォントサイズと文字画像のサイズを調整した HTML実装 例は以下のようになる。Web フォント表示する文字のフォントサイズは、CSS の font-size プロパティで44px（ピクセル）に指定し、文字画像は<img>タグの属性の height と width で高さと幅をそれぞれ44px に指定している。
<span class="preview-char"><span >情</span>
<img class="moji" src="/ipapro/img/mj029194.png" height="44" width="44"> <span>情</span></span> //CSS定義 preview-char { font-size: 44px; } //ブラウザ表示結果 （確認環境：Internet Explorer 8, 画面解像度 1280x1024） この実装では、Web フォント表示する文字のフォントサイズと文字画像のサイズは同じ ように見えるが、文字と文字画像の縦位置のずれが目立っている。文字と文字画像の縦位 置のずれを調整するため<img>タグに対して CSS の vertical-align プロパティで縦方向の 位置を調整したHTML 実装例が以下のようになる。 21
<span class=” preview-char”><span >情</span>
<img class=”moji” src="/ipapro/img/mj029194.png" height=”44” width=”44”> <span>情</span></span> //CSS定義 preview-char { font-size: 44px; } img.moji { vertical-align: -0.1em; } //ブラウザ表示結果 （確認環境：Internet Explorer 8, 画面解像度 1280x1024） vertical-align プロパティでの調整によって、文字と文字画像の縦位置のずれが目立たな くなる。 22
Internet Explorer 7, 8, 9, Firefox 3.6, 11, Google Chrome, Opera, Safari で表示すると 以下のようになりほぼ同様の結果となる。
・Internet Explorer 7 ・Internet Explorer 8 ・Internet Explorer 9
・Firefox 3.6 ・Firefox 11 ・Google Chrome 18
・Opera 11.61 ・Safari 5.1
（確認環境：Windows 7 SP 1, 画面解像度 1280x1024）
【Web フォント表示文字と文字画像の垂直方向のずれの課題】 実証実験では、Web フォント表示する文字のフォントサイズと文字画像のサイズを固定 し、文字画像の垂直方向の位置調整を固定で行ったが、使用するブラウザによっては、垂 直方向のずれが目立つ場合がある。文字画像のインライン画像を自然な表示に見せるため には、文字画像の垂直方向の位置を、ブラウザごとに最適な値に動的に変更できるような 実装が必要になる。 また、今回は手動で調節しながら最適な値を探し出したが、自動的に調整する方法がな いか調査する必要がある。 【符号化対象外文字の表示の課題】 文字情報基盤漢字の符号化対象外文字は、符号化されていないが、図形データ自体は、 IPAmj 明朝フォントに搭載されている。また、SVG 形式のデータも存在する。 SVG 形式は Web フォントとして適用可能なため、表 3 に示したように全てのブラウザ が対応しているわけではないが（Firefox、Safari、Opera が対応）、符号化対象外文字の表 示手段として残る検討課題である。 【文字画像の解像度の課題】 サイト公開当初（6 月～8 月）は、64×64px の解像度の文字画像を使用していた（表 14 参照）が、Web フォント表示の文字と比較してぼやけたように表示されていた。印刷した 場合、さらにそれが顕著となった。 文字画像の画面表示と印刷結果を向上させるため文字画像の解像度を上げることを検討 した。128×128px の文字画像で試行したところ、画面表示と印刷結果が改善されたため、8 月以降は、128×128px の解像度の文字画像を使用した。これによって Web フォント表示 の文字と比較した場合のぼやけ感が画面上、印刷ともに軽減された。 以上のことから、文字画像を使用する際、画面上で表示する場合と印刷する場合とで、 必要な解像度を考慮する必要がある。画面上で表示する場合、文字画像のサイズはどの程 度であればWeb フォント表示文字と同等に見えるのかを検討する必要がある。印刷する場 合は、印刷に必要な解像度を検討する必要がある。 24
5
コピー＆ペースト機能
実証実験では、符号化対象外の文字、または、CJK 統合漢字拡張領域や IVS の符号化対 象の文字であってもWeb ブラウザがサポートしていない場合、それらの文字をインライン 画像としてWeb ブラウザ上に表示する実装を行った。 Web ブラウザ上で表示されたインライン画像を含む文字列を電文として交換する場合、 インライン画像のメタ情報を電文中に保存することが必要となる。電文の受信側は、メタ 情報を使用することで、Web ブラウザ上でインライン画像を含む文字列を復元することが 可能となる。 実証実験では、Web ブラウザに表示されたインライン画像を含む文字列をコピー＆ペー ストした際に、ペースト先アプリケーションにインライン画像のメタ情報を保存する方法 を検討し、実装した。 前提として、特定のWeb ブラウザに依存しない方式であること、Web ブラウザにプラグ イン（アドオン）等をインストールしないものとした。ただし、Applet 等の動的なプログ ラムのダウンロードはこの限りではない。 5.1 文字のコピー＆ペースト Web ブラウザに表示されたインライン画像ではない文字は、そのままペースト先のアプ リケーションにコピーされるものとする。 5.2 インライン画像のコピー＆ペースト (a)Web ブラウザに表示されたインライン画像を含む文字列をインライン画像表示が可 能なアプリケーション（例：Microsoft Word 等）へコピー＆ペーストした際に、ペースト 先はインライン画像がコピーされるものとする。 (b)Web ブラウザに表示されたインライン画像を含む文字列をインライン画像表示が不 可能なアプリケーション（テキストエディタ、メモ帳等）へコピー＆ペーストした際に、 ペースト先へは「MJ 文字図形名」を表す文字がコピーされるものとする。 255.3 メタデータ（MJ 文字図形名）の埋め込み方式（HTML タグの実装方式） 実証実験では、前提通り Web ブラウザへのプラグイン等のインストールは実施せず、 HTML 実装のみでのコピー＆ペーストの実現方法を検討した。HTML 実装のみを前提とし たため、インライン画像を含む文字列をコピーした際の情報の保持はWeb ブラウザに依存 する。これを踏まえ、HTML 実装として以下の表 15 の 4 パターンで検討した。 具体的には、メタデータの埋め込み方として、#1:<img>タグの alt 属性にメタデータを 埋め込む方法、#2:<span>タグにメタデータを埋め込み、画面上は表示されないように style 属性でメタデータを非表示にする方法、#3:#1 と#2 を両方使用する方法、#4:<span>タグに メタデータを埋め込むが、画面外にstyle 属性で画面外に配置されるようにする方法につい て検討した。 表 15 HTML 実装の検討パターン # 属性の組合せ HTML 実装
1 IMG+Alt <img class="moji" src="mj058001.png" alt="MJ058001">部 航 2 IMG+Span(display:none) <img class="moji" src="mj058001.png">
<span style="display:none">MJ058001</span>部 航 3 IMG+Alt+Span(display:none) <img class="moji" src="mj058001.png" alt="MJ058001">
<span style="display:none">MJ058001</span>部 航 4 IMG+Span(display:inline-block;
width:0px;text-indent: -999em;)
<img class="moji" src="mj058001.png" alt="">
<span style="display:inline-block;width:0px;text-indent: -999em;"> MJ058001</span>部 航
この検討結果より、前述の（a）（b）の実現性について表 16、表 17 にまとめた。
表 16 HTML 実装の Windows 確認結果
# OS Windows
ブラウザ IE FireFox Chrome Safari Opera
ブラウザバージョン 8.0 11.0 18.0 5.1.5 11.61
対象 （a） （b） （a） （b） （a） （b） （a） （b） （a） （b）
1 IMG+Alt ○ × ○ ○ ○ × ○ × × × 2 IMG+Span(display:none) ○ ○ ○ × ○ × ○ × × × 3 IMG+Alt+Span(display:none) ○ ○ ○ ○ ○ × ○ × × × 4 IMG+Span(display:inline-block;width:0px;t ext-indent: -999em;) △ ○ △ ○ △ ○ △ ○ ● ○ 26
表 17 HTML 実装の Mac・Linux 確認結果
# OS Mac・Linux
ブラウザ FireFox Chrome Safari Opera
ブラウザバージョン 11.0 18.0 5.1.5 11.61
対象 （a） （b） （a） （b） （a） （b） （a） （b）
1 IMG+Alt ○ ○ ○ × ○ × × × 2 IMG+Span(display:none) ○ × ○ × ○ × × × 3 IMG+Alt+Span(display:none) ○ ○ ○ × ○ × × × 4 IMG+Span(display:inline-block;width:0px;t ext-indent: -999em;) △ ○ △ ○ ▲ ○ ● ○ （2012/5/23 現在） 凡例
（a）：MS Word、MAC Word へのインライン画像としてのコピー＆ペースト （b）：メモ張などへのテキストとしてのコピー＆ペースト ○：正常に実行可能 ×：実行結果が不正（情報が欠ける、画像が貼りつかない等） △：制限事項あり；ペースト結果が画像＋テキストのように二重でペーストされる。 ●：制限事項あり；Opera では画像とテキストの同時のコピーができない。 今回の場合、テキストとしてペーストされる。
▲：制限事項あり；Mac Safari では●と同じ結果。Linux Safari では△と同じ結果。
以上より、最も多くのパターンをサポート可能な#4 の方式を採用した。 【クリップボードへのコピーの課題】 実証実験では、ユーザー操作による文字列のクリップボードへのコピーを実装した。ク リップボードへのコピー方法として、Javascript によるコピーが課題として挙げられる。 Javascript によるクリップボードへのコピーとして、テキスト形式と HTML 形式の 2 つ の形式でコピーできなければ、コピー＆ペースト機能を実現できない。Internet Explorer はクリップボードアクセス用のAPI をサポートしている。Firefox, Gooogle Chrome, Safari, Opera が API をサポートしているのか調査が必要である。
6
印刷機能
6.1 実装方式 Web フォント表示した文字を印刷するために特別な機能は実装せず、ブラウザの印刷機 能を使用する方式とした。 6.2 各ブラウザでの Web フォント印刷対応状況 各ブラウザでWeb フォントの印刷が可能かどうか検証を行った。検証でサンプル印刷し たWeb フォントは、表 9 を使用した。 表 18 各ブラウザでの Web フォント印刷対応状況 # 対象ブラウザ 対象OSWindows Mac OS X Linux XP SP3 Vista SP2 7 SP1 10.6.8 10.7 Debian 6.0.4 Fedora 16 1 Internet Explorer
7.0 ○ ○ N/A N/A N/A N/A N/A
2 8.0 ○ ○ ○ N/A N/A N/A N/A
3 9.0 N/A ○ ○ N/A N/A N/A N/A
4 Firefox 3.6 × × × × × × × 5 11 × × × × × × × 7 Google Chrome 18.0 － － － － － － － 8 Safari 5.1 ○ ○ ○ ○ ○ ○ ○ 9 Opera 11.61 ○ ○ ○ ○(*1) ○(*1) ○(*2) ○(*2) （2012/5/23 現在） 凡例 ○：Web フォント表示可能な範囲について印刷可能 ×：Web フォント印刷不可 －：検証対象外 N/A：OS とブラウザの組み合わせが存在しない (*1)CJK 統合漢字拡張 A を Web フォント表示できないが、印刷時は Web フォントの字形 で印刷可能 (*2)非漢字が印刷できない。 28
6.3 Firefox, Chromeの印刷の不具合
Firefox で Web フォント表示されている画面の印刷を実行すると、Web フォントの字形 では印刷されなかった。
Google Chrome で Web フォント表示されている画面の印刷を実行すると、同じ文字であ っても印刷を数回繰り返すと印刷される場合と印刷されない場合があった。印刷される場 合は、Web フォントの字形で印刷された。 6.4 PDF出力の確認 実証実験サイトのアンケートに「PDF に印刷したら文字が出力されない。」「PDF に出力 すると印字されない文字が複数ありました。」という回答があったため、PDF 出力の確認を 行った。結果を表 19 に示す。ブラウザや PDF 出力ソフトによって Web フォントの埋め込 みや、PDF 出力結果が変わる結果となった。 表 19 Web フォント PDF 出力結果 # OS/ブラウザ PDF 出力 ソフト Web フォン ト埋め込み 出力内容 Windows 7 SP1 1 Internet Explorer 9 Adobe Acrobat XI ○ Web フォントが文字として出力される 2 Firefox 11 × Web フォントではなくブラウザのフォ ント未指定時の文字が画像として出力 される 3 Safari 5.1 × Web フォントが文字ではなく画像とし て出力される 4 Opera 11.61 ○ Web フォントが文字として出力される Mac OS X 10.7 5 Firefox 11 Mac OS X 組み込み × Web フォントではなくブラウザのフォ ント未指定時の文字が画像として出力 される 6 Safari 5.1 ○ Web フォントが文字として出力される 7 Opera 11.61 ○ Web フォントが文字として出力される （2013/01/30 現在） 29
7
ブラウザ依存事象一覧
7.1 IE8：CJK 拡張 B が表示されない
Internet Explorer 8 （Windows XP, Vista, 7 いずれも）では、図 1 のように CJK 統合 漢字拡張B の文字が Web フォント表示されず、ブラウザのフォント未指定時の字形で表示 された。
この問題については、Microsoft のサポート情報が公開されている。5
Web フォント表示期待結果 ブラウザの実際の表示結果
図 1 Windows 7 SP1 / Internet Explorer 8 での表示結果
（2013/01/15） 7.2 Win/Opera：CJK 拡張 B が表示されない Windows XP SP3 / Opera 11.61 の組合せでは、図 2 のように CJK 統合漢字拡張 B の文 字がWeb フォント表示されなかった。 Web フォント表示期待結果 ブラウザの実際の表示結果 図 2 Windows XP SP3 / Opera 11.61 での表示結果 （2013/01/15） 7.3 Mac/Opera：CJK 拡張 A が表示されない Mac OS X 10.7 / Opera 11.61 の組み合わせでは、図 3 のように CJK 統合漢字拡張 A の 文字がWeb フォント表示されなかった。 Web フォント表示期待結果 ブラウザの実際の表示結果 図 3 Mac OS X 10.7 / Opera 11.61 での表示結果 5 http://support.microsoft.com/kb/2744008/ja 30
（2013/01/15） 7.4 IE9以前：CSS ファイルの読み込み制限が最大 31 ファイル 実証実験では、1 文字ずつサブセット化した Web フォントを使用した。 開発当初は、Web フォントごとに Web フォント表示用の定義を記述した CSS ファイル を用意しておき、画面に表示する文字に対応するCSS ファイルを読み込む方式を採用して いた。しかし、Internet Explorer 9 以前では、CSS ファイルを同時に 31 ファイルまでし か読み込めない制限があったため、32 文字以上の文字は Web フォント表示されなかった。 このため、Web フォントごとに CSS ファイルを読み込むのではなく、1 つの<style>タグ 内に、画面表示する文字のWeb フォント表示用の定義を埋め込む方式とした。 Internet Explorer 10 からはこの制限は削除されている。6 7.5 Opera：インライン画像がコピー＆ペーストされない Opera では、ブラウザに表示した文字画像のワード等へのコピー＆ペーストで、文字画 像がペーストされず、MJ 文字図形名のみがペーストされた。 7.6 Opera：画面表示と印刷結果が異なる文字が存在 Windows 7 SP1 / Opera 11.61 の組み合わせでは、図 4 のようにブラウザの画面上では Web フォント表示されなかった。また、印刷すると Web フォント表示ともブラウザ表示と も異なる字形で印刷された。 Web フォント表示期待結果 ブラウザの実際の表示結果 印刷結果 図 4 Windows 7 SP1 / Opera 11.61 での表示結果 （2013/01/15） 7.7 Safari：印刷プレビュー画面で印刷後、画面のボタンが反応しなくなる Safari で印刷後、フリーズする現象が発生した。INPUT タグでスタイルシートによる BORDER の設定をしていると当現象が発生したため、INPUT タグの BORDER 指定を IE のみで使用するように変更した。
6 http://msdn.microsoft.com/ja-jp/library/hh920762.aspx
31
8
スマートフォン（Android, iOS）確認結果
8.1 確認結果
スマートフォン（Android, iOS）で Web フォント表示の可否を確認した結果を表 21 に 示す。Web フォント表示の確認には表 9 の文字を使用した。表 21 の表示パターンは表 20 を参照。 表 20 Web フォント表示可否パターン（再掲） # パターン BMP CJK 統合漢字拡張 B, C, D IVD 1 A Web フォント表示可 Web フォント表示不可 2 B Web フォント表示可 Web フォント表示不可 3 C Web フォント表示可 表 21 スマートフォンの Web フォント表示可否パターン対応 # ブラウザ 対象OS android iOS 2.2.1 4.0.4 6.0.1 1 標準ブラウザ Web フォント表示不可 C N/A
2 Safari N/A N/A C
凡例 N/A:OS とブラウザの組み合わせが存在しない （2013/2/1 現在）
Android 2.2.1 の標準ブラウザの場合、Web フォントがダウンロードされなかった。 Android 4.0.4 の標準ブラウザの場合、確認に使用した全文字が Web フォント表示された。 iOS 6.0.1 の Safari の場合、確認に使用した全文字が Web フォント表示された。
