パソコンに入っているフォントをfont-familyで指定する方法

2015年2月19日

この記事は最終更新日から9年経過しています。内容が古い可能性があります。

Webサイトを作るときにどのフォントで表示するか、というのは大体定番が決まっていて、あまり新しいフォントを指定することはありません。というのもWebを見てもらう場合に使われるフォントはユーザーのPCに入っているフォントが利用されるので一般的なフォントを使うことがほとんどだからです。
しかし、ちょっと変わったフォントでローカルのWebを作って表示して、blogの画像にしてみようかしら？と思ってよく使うフォントで無いものをダウンロードしてきたのですが。はて、どうやってフォント指定するのかな？と思って調べたのでそれについて書きます。

記事をざっと見る

こんな事がしたかったのです

フリー素材で　01010101　みたいな表示をさせたモノが斜めから写真で撮影されたモノ。。わ、わかりにくいですね。えーと、

ぱくたそ　モニターに表示された1と0

これを見つけました。このまま使おうかなーと思ったのですがもちょっと横幅が欲しいとか思ったりしました。他のサイトにも似たようなモノがないか探したんですがちょっとみつからなくて。

あーでもこれ0と1ならPHPかなんかで表示して、フォントも「それっぽい」感じのを探してきて自分で表示すれば好きなように撮影できるんじゃない？と思ったのです。

電光掲示板風の数字が表示出来るフォントを探す

このちょっと電光掲示板風のフォント、とりあえず自分のPCに入っているフォントを見てみましたがありません。ということで

電光掲示板風　フォント

で探して、この一覧から

LEDっぽい雰囲気のデジタルフォント30選

LED BOARD　というフォントを見つけました。

http://www.dafont.com/led-board.font

このフォントをダウンロードして、

zipファイルを解凍し、

LEDBDREV.TTF　と　LEDBOARD.TTF　を　C:\Windows\Fonts　にコピーします。これでこのフォントが使えるようになります。

パソコンに入っているフォントをfont-familyで指定する

色々試行錯誤して分かった結果を書きますが、C:\Windows\Fonts　でフォントを見たときの名前（標準や太字などと書いてある部分以外）　をそのまま　font-family　に書けばそのフォントでブラウザに表示されます。ただし、もちろん変わったフォントなど全ての人のPCに入っている訳では無いので変わったフォントで必ず表示されるのは自分のPCだからなのですが。

Fontsにこんな感じで表示されています。この　オドリコフォント　から　さきほどダウンロードして持って来たフォントまでを指定して表示してみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
<?php
$string = '<div style="font-family:%s;font-size:2rem;">%s: 01010101</div>';
$fonts = array('オドリコフォント', 'こども丸ゴシック', 'はなこかな-W3', 'はんなり明朝', 'プラネタリウム', '超極細ゴシック', 'LED BOARD', 'LED BOARD REVERSED');
foreach($fonts as $font){
    echo sprintf($string, $font, $font);
}
?>
    </body>
</html>

こんな感じのPHPを書いて保存して実行すると、

このように各フォントでフォント名と　01010101　という数字が表示されました。

インターネットで皆さんに見ていただくのは無理だと思いますが、htmlで資料を作って印刷したりpdfにしたりするには便利かもしれません(^^)。

面倒なのは名前を見たまま入力しなければいけないことで、右クリックしてプロパティではこの名前をコピーできるところがみつかりませんでした。

この名前（拡張子部分をはずしたもの）で指定すると日本語フォントはOKだったのですが、英語フォントはこの名前で指定してもフォントが変更できませんでした。

たぶんプログラムを書けばこの表示されている　フォントの名前　を取ってくることができると思うのですが、そこまでしなくてもまぁいいかなぁ(^_^;と思ってとりあえず自分のやりたい　01010101　で画像を作るということに挑戦してみました。

01010101で表示されるPHPを書いてみた

ということでフォントは黒バックの　LED BOARD　を使って、PHPを書いてみました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body style="background-color:#000">
<?php
for($i=0;$i<50;$i++){
    echo '<div style="margin:0;padding:0;font-family:LED BOARD;font-size:30px;letter-spacing:-1px;background-color:#fff;">';
    for($j=0;$j<10;$j++){
        echo decbin(mt_rand());
    }
    echo "</div>";
}
?>
</body>
</html>

内容は50行繰り返しを行ってその中で　mt_rand()　で乱数を発生させたモノを　decbin　で二進数に（0か1）変換したモノを表示を10回繰り返す　というかんじです。

ローカルで実行すると、