HTML - ウェブフォント - フリーフォントをウェブフォントとして設置する

1.　概要

2.　ウエブフォント作成

3.　設置

4.　少しいじって再設置

5.　Migu を試してみる

1.　概要

　ちょっと「Google」大先生のフォントで物足りなくなってきたのです。
　理由は、いずれ述べます。
　（本ページの参考サイトは、リンク切れになりました）

2.　ウエブフォント作成

　ツールを使用してウェブフォントを作成します。
　ツールのダウンロード・使用方法等については「ウェブフォント作成」の方でどうぞ。
　今回は「Cica(シカ) 」で作成してみました。

3.　設置

　フォントファイルを以下に設置して

/font/cica.woff


　下記のように記述しておけば


</pre><style>
@font-face
{
  font-family: 'cica';
  src: url('/font/cica.woff') format('woff');
}
</style><pre>


　以降、「font-family」として「cica」を指定しておけば、そのまま使えます。

　「cica」は、こんな文字です。
　１２３４５６７８９０←全角１０文字
　12345678901234567890←半角２０文字

　でまぁ・・・。全角１文字に対して半角２文字の等幅フォントが使える・・・と喜んだのは束の間でした。
　「cica」はプログラム用に最適化しているためか・・・全角空白にうっすら目印があるのです・・・。あぁ。あかん。

4.　少しいじって再設置

　今度は「fontforge」というツールを使用して、全角空白のフォントを真っ白にして再設置。
　ツールの使い方はこれも「フォントエディタ fontforge」の項をご参照ください。

　でまぁ、一応これ

　「cica」は、こんな文字です。
　１２３４５６７８９０←全角１０文字
　12345678901234567890←半角２０文字

　どうでしょうか？
　全体にこれを反映させようと思っています。

5.　Migu を試してみる

　やってみます。

　「migu-1m」は、こんな文字です。
　１２３４５６７８９０←全角１０文字
　12345678901234567890←半角２０文字

　そうか、「Google」大先生のやっているのは「Migu 1m」じゃなかったんだ。これでいけそう。

　何故か、「Cica」は、別のマシンで使用したら「Eclipse」の表示が変だったので・・・。
　これでわたしは、「Migu 1m」を使用することとしました。非常に具合が良いです。
　唯一の欠点が、¥（円記号）が \（バックスラッシュ）で表示されることくらいでしょうか。
　ダウンロードは「/63545/migu-1m-20150712.zipをダウンロード - mixfont-mplus-ipa - OSDN」からどうぞ。
　2018年9月19日現在、「WIndows」系の「PC」から本サイトにアクセスした際は、この「Migu 1m」で表示されていることと思います。