WOFFファイルを使って閲覧者（クライアントのブラウザ）のパソコンに外字が登録されていなくてもブラウザから外字の表示ができるか試してみました。
＜環境・前提条件＞
この記事はWindows 10でやってみた内容になっています。
動作を確認したブラウザはchrome,FireFox,Edgeで、バージョンは投稿当時の最新版です。
＜目次＞
＜とりあえずテストするための外字フォントを作成する＞
外字エディタ（eudcedit）でテスト用に外字を作成します。
今回は**[F040]の[0]**のコードに外字を作成しました。
外字の作成はこちらを参考にしました。
試しに外字を表示してみる
テキストエディタに今回作成した外字を表示させてみます。
登録したコード[F040]を入力して変換すると「[文字コード変換]...」というのがあります。
これを選択すると、
今回作成した「ヤレバデキル」外字が選択できるようになっています。選択すると、
表示できました。
＜外字フォントをWEBで使えるようにWOFF形式にする＞
WOFFとは？
WOFFは「Web Open Font Format」の頭文字でWebページで表示に用いる事を想定されて開発されたフォントファイル形式です。CSSでこのフォントを指定すると閲覧者のパソコンにフォントがインストールされていなくてもブラウザ上では表示できるようになります。
外字フォントファイル（EUDC.TTE）をWOFF形式に変換する
外字フォントファイル（EUDC.TTE）は標準では C:\Windows\Fonts\ に保存されています。
ただ、 C:\Windows\Fonts\ ディレクトリは特殊なディレクトリなので普通にエクスプローラで表示してもEUDC.TTEは表示されません。
なので、コンソールからアクセスしてコピーします。
PS C:\Windows\Fonts> dir .\EUDC.TTE
ディレクトリ: C:\Windows\Fonts
Mode LastWriteTime Length Name
---- ------------- ------ ----
-a---- 2021/09/19 10:52 78260 EUDC.TTE
PS C:\Windows\Fonts> cp .\EUDC.TTE ../../
PS C:\Windows\Fonts>
今回はTTEファイルをWOFFファイルに変換してくれる「WOFFコンバータ」を使いました。
投稿時現在はフリーソフトで商用利用も可能のアプリです。
「EUDC.TTE」ファイルを「gaiji.woff」ファイルに変換しました。
＜表示確認用HTMLを作成する＞
外字の表示を確認するHTMLは以下です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@font-face {
font-family: "myFont";
src: url("gaiji.woff") format('woff');
}
.myFontClass {
font-family: "myFont";
}
* {
font-size: 30px;
}
</style>
<body>
<p>サンプル文字列は「<span class="myFontClass"></span>」です。</p>
</body>
</html>
皆さんのパソコンでは「<span class="myFontClass"></span>」のspanタグで括られた文字は正しく表示されていないと思います。（外字フォントがインストールされていないから）
＜表示確認＞
このHTMLを先ほど変換したgaiji.woffファイルと同じディレクトリに配置して各ブラウザで表示してみました。
もちろん、外字を作成したパソコンからではなく、外字フォント登録していない別パソコンにsample.htmlとgaiji.woffファイルだけコピーして表示しました。（本当はどこかのWEBサーバに配置して確認すればいいんだけど、面倒だった。。。）
chrome
FireFox
Edge