外字エディタで作成した、外字フォント情報ファイル(EUDC.tte)を取り出し、WOFF形式とEOT形式に変換し、サンプルのHTMLを出力し主要なブラウザでWOFFファイル・EOTファイル・通常のトゥルータイプフォントが動作するか確認します。
※外字フォント情報ファイル(EUDC.tte)をWOFF形式へ変更し、サンプルHTMLも作成する方法も参考にして下さい。
※外字フォント情報ファイル(EUDC.tte)をWOFF形式・EOT形式へ変更し、サンプルHTMLも作成する方法も参考にして下さい。
【準備】
１．「外字エディタで外字の作成方法」の手順で、外字を作成しておきます。
２．作成した外字を、「外字フォント情報ファイル(EUDC.tte)の取り出し方法」の手順で、取り出しておきます。
【手順１】
１．「WOFFコンバータの起動方法」の手順で、WOFFコンバーターを起動。
２．「変換前ファイル」に「C:\gaiji\EUDC.tte」と入力。
３．「EOTファイルを作成する」を選択。
４．「サンプルHTMLファイルを作成する」を選択。
５．「変換前フォントをsrcに追加する」を選択。
６．「変換開始」ボタンをクリック。
%E3%82%92WOFF%E5%BD%A2%E5%BC%8F%E3%83%BBEOT%E5%BD%A2%E5%BC%8F%E3%81%B8%E5%A4%89%E6%9B%B4%E3%81%97%E3%80%81%E3%82%B5%E3%83%B3%E3%83%97%E3%83%ABHTML%E3%82%82%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%952-01.png)
１．「OK」ボタンをクリック。
%E3%82%92WOFF%E5%BD%A2%E5%BC%8F%E3%83%BBEOT%E5%BD%A2%E5%BC%8F%E3%81%B8%E5%A4%89%E6%9B%B4%E3%81%97%E3%80%81%E3%82%B5%E3%83%B3%E3%83%97%E3%83%ABHTML%E3%82%82%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%952-02.png)
１．以下の様に「EUDC.eot」と「EUDC.woff」と「EUDC.html」ファイルが作成されていれば成功です。
%E3%82%92WOFF%E5%BD%A2%E5%BC%8F%E3%83%BBEOT%E5%BD%A2%E5%BC%8F%E3%81%B8%E5%A4%89%E6%9B%B4%E3%81%97%E3%80%81%E3%82%B5%E3%83%B3%E3%83%97%E3%83%ABHTML%E3%82%82%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%952-03.png)
１．「EUDC.html」を開き、以下の様に、普通のひらがなと、外字を入力。
<p>サンプル文字列は「<span class="myFontClass"></span>」です。</p>↓変更
<p>サンプル文字列は「<span class="myFontClass">あいうえお</span>」です。</p>
%E3%82%92WOFF%E5%BD%A2%E5%BC%8F%E3%83%BBEOT%E5%BD%A2%E5%BC%8F%E3%81%B8%E5%A4%89%E6%9B%B4%E3%81%97%E3%80%81%E3%82%B5%E3%83%B3%E3%83%97%E3%83%ABHTML%E3%82%82%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%952-04.png)
１．「外字エディタで外字の削除方法」の手順で、登録した外字を削除しておきます。
※WOFFファイルが動作するかを確認するため、自マシンの外字は削除しておきます。
【手順６】
１．「EUDC.html」をSafari(バージョン5.1.7)にドラッグアンドドロップし、表示した場合、上手く表示されません。
%E3%82%92WOFF%E5%BD%A2%E5%BC%8F%E3%83%BBEOT%E5%BD%A2%E5%BC%8F%E3%81%B8%E5%A4%89%E6%9B%B4%E3%81%97%E3%80%81%E3%82%B5%E3%83%B3%E3%83%97%E3%83%ABHTML%E3%82%82%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%952-05.png)
１．「Apache HTTP Server 2.2.22のインストール方法(Windows版)」の手順で、Apacheをインストールしておきます。
２．「Apacheの起動方法(Windows版Apache Monitor)」の手順で、Apacheを起動しておきます。
３．Apacheのインストールディレクトリの「htdocs/gaiji3」ディレクトリに「EUDC.eot」と「EUDC.html」と「EUDC.woff」をコピーます。
４．ファイアウォールを一時停止にする。
※Windows7の場合：「Windowsファイアウォールを一時的に停止する方法(Windows7)」
※WindowsXPの場合：「Windowsファイアウォールを一時的に停止する方法(WindowsXP)」
【手順８】
１．Androidの標準ブラウザで以下のURLを開いた場合、表示されました。
http://[マシンのIP]/gaiji3/EUDC.html
%E3%82%92WOFF%E5%BD%A2%E5%BC%8F%E3%83%BBEOT%E5%BD%A2%E5%BC%8F%E3%81%B8%E5%A4%89%E6%9B%B4%E3%81%97%E3%80%81%E3%82%B5%E3%83%B3%E3%83%97%E3%83%ABHTML%E3%82%82%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%952-06.png)
%E3%82%92WOFF%E5%BD%A2%E5%BC%8F%E3%83%BBEOT%E5%BD%A2%E5%BC%8F%E3%81%B8%E5%A4%89%E6%9B%B4%E3%81%97%E3%80%81%E3%82%B5%E3%83%B3%E3%83%97%E3%83%ABHTML%E3%82%82%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%952-07.png)
【手順９】
１．ファイアウォールを一時停止を元に戻しておきます。
※Windows7の場合：「Windowsファイアウォールの停止を元に戻す方法(Windows7)」
※WindowsXPの場合：「Windowsファイアウォールの停止を元に戻す方法(WindowsXP)」
以上です。
%E3%82%92WOFF%E5%BD%A2%E5%BC%8F%E3%83%BBEOT%E5%BD%A2%E5%BC%8F%E3%81%B8%E5%A4%89%E6%9B%B4%E3%81%97%E3%80%81%E3%82%B5%E3%83%B3%E3%83%97%E3%83%ABHTML%E3%82%82%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95-04.png)
%E3%82%92WOFF%E5%BD%A2%E5%BC%8F%E3%83%BBEOT%E5%BD%A2%E5%BC%8F%E3%81%B8%E5%A4%89%E6%9B%B4%E3%81%97%E3%80%81%E3%82%B5%E3%83%B3%E3%83%97%E3%83%ABHTML%E3%82%82%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95-03.png)
%E3%82%92WOFF%E5%BD%A2%E5%BC%8F%E3%83%BBEOT%E5%BD%A2%E5%BC%8F%E3%81%B8%E5%A4%89%E6%9B%B4%E3%81%97%E3%80%81%E3%82%B5%E3%83%B3%E3%83%97%E3%83%ABHTML%E3%82%82%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95-08.png)
