@font を使ってみる

bs_ryok01a
以前から、PC にインストールされていないフォントが表示できるサイトがあって、これどうやってるんだろうなぁって思っていた。ウェブサイトを表示した場合、そこに表示される文字は画像でない限り、PC にインストールされているフォントに左右されてしまう。
つまり見た目がどうしても人によって変わってしまう。
フォントを固定できれば、だいぶ環境による差を吸収できる。

話は少しずれるが、実はウェブってやっぱ読みにくいなぁと思っていて、それは当然で、同じようなレイアウトを取る雑誌では、挿絵・写真の位置や文字の大きさ改行位置が読みやすいように編集されているが、ウェブサイトは表示する幅や高さ(つまり紙の大きさ)が違うし、文字の大きさも違うし、書体も違う。当然挿絵の位置も変わってきてしまう。
なので、やっぱり読みにくいと思っている。これについてあまり言及したサイトを見たことはないが、本ってやっぱりよく出来てるなぁってボクは思っている。

閑話休題。
で、それに近づけるというわけではないのだけれど、ボク自身がサイトを編集するにあたって使っているフォントを、この TAMA Networks でも表示されるようにしてみた。CSS3 ではサーバ上のフォントをウェブサイトの表示に使うことが出来るのだ。定義は以下の通り。

@font-face {
font-family:”Migu 1C”;
src:url(‘https://amatsukami.jp/fonts/migu-1c-regular.eot’);
}
@font-face {
font-family: “Migu 1C”;
src:url(‘https://amatsukami.jp/fonts/migu-1c-regular.ttf’) format(‘truetype’);
}

ただ、このフォントをこう言う使い方していいのかは、ちょっと自信がない。一応ライセンスの所は読んだのだが……使用についてはクライアントで使用することばかりが書かれていて、ちと不安ではある。問題がある場合はこの定義を消すことになると思われる。下のは左が新しいフォント、右が Windows Vista から採用されている「メイリオ」。Windows Vista 以降で TAMA Networks を表示するとこの「メイリオ」というフォントで表示されていたんだけど、Mac やスマフォでみるとまた違っていた。
ただスマフォでは @font に対応してないらしく(CSS3 には対応してるはず)、こちらで設定したフォントは表示されなかった。

migu meiryo