外字フォント情報ファイル(EUDC.tte)をWOFF形式へ変更し、サンプルHTMLも作成する方法

【目的】
外字エディタで作成した、外字フォント情報ファイル(EUDC.tte)を取り出し、WOFF形式に変換し、サンプルのHTMLを出力し主要なブラウザでWOFFファイルが動作するか確認します。



【準備】
１．「外字エディタで外字の作成方法」の手順で、外字を作成しておきます。
２．作成した外字を、「外字フォント情報ファイル(EUDC.tte)の取り出し方法」の手順で、取り出しておきます。



【手順１】
１．「WOFFコンバータの起動方法」の手順で、WOFFコンバーターを起動。
２．「変換前ファイル」に「C:\gaiji\EUDC.tte」と入力。
３．「サンプルHTMLファイルを作成する」を選択。
４．「変換開始」ボタンをクリック。

【手順２】
１．「OK」ボタンをクリック。

【手順３】
１．以下の様に「EUDC.woff」と「EUDC.html」ファイルが作成されていれば成功です。

【手順４】
１．「EUDC.html」を開き、以下の様に、普通のひらがなと、外字を入力。

<p>サンプル文字列は「<span class="myFontClass"></span>」です。</p>

↓変更

<p>サンプル文字列は「<span class="myFontClass">あいうえお</span>」です。</p>

【手順５】
１．「外字エディタで外字の削除方法」の手順で、登録した外字を削除しておきます。
※WOFFファイルが動作するかを確認するため、自マシンの外字は削除しておきます。



【手順６】
１．「EUDC.html」をIE8にドラッグアンドドロップし、表示した場合、上手く表示されません。

【手順７】
１．「EUDC.html」をChrome(バージョン25)にドラッグアンドドロップし、表示した場合、表示されます。

【手順８】
１．「EUDC.html」をFirefox(バージョン19.0.2)にドラッグアンドドロップし、表示した場合、表示されます。

【手順９】
１．「EUDC.html」をSafari(バージョン5.1.7)にドラッグアンドドロップし、表示した場合、上手く表示されません。

【手順１０】
１．「Apache HTTP Server 2.2.22のインストール方法(Windows版)」の手順で、Apacheをインストールしておきます。
２．「Apacheの起動方法(Windows版Apache Monitor)」の手順で、Apacheを起動しておきます。
３．Apacheのインストールディレクトリの「htdocs/gaiji」ディレクトリに「EUDC.html」と「EUDC.woff」をコピーます。
４．ファイアウォールを一時停止にする。
※Windows7の場合：「Windowsファイアウォールを一時的に停止する方法(Windows7)」
※WindowsXPの場合：「Windowsファイアウォールを一時的に停止する方法(WindowsXP)」

【手順１１】
１．Androidの標準ブラウザで以下のURLを開いた場合、上手く表示されません。

http://[マシンのIP]/gaiji/EUDC.html

２．Androidのバージョンは2.3.5。

【手順１２】
１．AndroidのFirefoxで以下のURLを開いた場合、表示されます。

http://[マシンのIP]/gaiji/EUDC.html

２．Firefoxのバージョンは19.0.2。

【手順１３】
１．ファイアウォールを一時停止を元に戻しておきます。
※Windows7の場合：「Windowsファイアウォールの停止を元に戻す方法(Windows7)」
※WindowsXPの場合：「Windowsファイアウォールの停止を元に戻す方法(WindowsXP)」

以上です。