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」で表示されていることと思います。
earthcar（アースカー）