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

Image [9]

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

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

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

Image

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

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

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

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

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

電光掲示板風 フォント

で探して、この一覧から

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

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

Image [2]

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

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

zipファイルを解凍し、

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

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

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

Image [4]

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

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

Image [5]

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

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

Image [6]

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

Image [7]

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

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

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

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

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

ローカルで実行すると、

Image [8]

こんな感じに表示されました。F11キーで全画面表示にして、iPhoneのカメラで撮影したのがこちら、

IMG_0313

まぁまぁかなぁ(^_^;。あー、今回はとりあえず font-familyの指定の仕方がはっきり分かったというだけでもよしとしたいと思います。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

トップへ戻る