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

1.　概要

2.　ウエブフォント作成

3.　設置

4.　少しいじって再設置

5.　Migu を試してみる

1.　概要

　本項は「フリーフォントを web フォントとしてサイトで使用してみる」を参考にさせていただきました。

　ちょっと 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」で表示されていることと思います。