文字情報基盤 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 が表示されない ............................................................................... 30

Contents 目次

7.4 IE9 以前：CSS ファイルの読み込み制限が最大 31 ファイル ................................................. 31 7.5 Opera：インライン画像がコピー＆ペーストされない ............................................................ 31 7.6 Opera：画面表示と印刷結果が異なる文字が存在 ................................................................... 31 7.7 Safari：印刷プレビュー画面で印刷後、画面のボタンが反応しなくなる ............................... 31 8 スマートフォン（Android, iOS）確認結果 ............................................................................. 32 8.1 確認結果 .................................................................................................................................... 32

1 実証実験サイトの前提環境 実証実験サイトの前提環境は以下の通り。

1.1 OS/ブラウザ

Web フォント表示の実験評価の対象とした OSとブラウザは以下の通り。 OS

Windows XP, Vista, 7 Mac OS X 10.6.8, 10.7

Linux (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

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 程度となることが判明した。上記のサイズであれば転送時間は許容範囲であると判断した。 但し、サブセットの細分化に比例し、実装に費やすコード量が増加することを考える必

要がある。

5

④サブセット単位の検討 日本語フォントは欧文フォントと違い、全ての字形データを含めてしまうと 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 文字ずつ確認する必要があり、作成、テストのコストが膨大となる。

8

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 フォントをダウンロードできているのか、という点が挙げられる。

9

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 フォント表示可否の検証が必要である。

12

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

Ā

13

6 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 フォント表示されない。

15

IVDの文字のWebフォント表示ができないOS/ブラウザの組み合わせで IVSを表示した

場合、以下のように表示される。

確認環境：Windows Vista SP2 Internet Explorer 8.0 （2012/5/23 現在） 凡例 Web フォント有：Web フォト表示

MJ 文字図形画像：文字画像表示 Web フォント無：フォント指定なし

16

【課題】 検証の結果、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）

23

【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 文字図形名」を表す文字がコピーされるものとする。

25

5.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 をサポートしているのか調査が必要である。

27

6 印刷機能

6.1 実装方式

Web フォント表示した文字を印刷するために特別な機能は実装せず、ブラウザの印刷機

能を使用する方式とした。

6.2 各ブラウザでのWeb フォント印刷対応状況

各ブラウザで Web フォントの印刷が可能かどうか検証を行った。検証でサンプル印刷した Web フォントは、表 9 を使用した。

表 18 各ブラウザでの 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 ○ ○ 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 フォント表示された。

32