2012年11月13日火曜日

【フォント】につてい


初心者WEBデザイン?
【フォント】につてい

ブラウザで使う、フォントについてのお話。

サイト製作の勉強をしていると、比較最初の頃にこの【フォント】についての問題に遭遇します。

一般的に言われている事で、【フォントは指定するな】と言う事が言われていますが、実際には大抵のサイトで、CSSによるフォント指定がされてます?

これでは言っている事と、やっている事が矛盾しますよね??
初心者にとっては、まってくもって【?????】といったところでしょうか。

本来の意味としては、フォントを指定しないという事は、【ブラウザの設定に任せる】という意味があります。
そもそも、ブラウザで使用するフォントとは、どういったモノなのでしょうか?

ブラウザで使用するフォントは、使用するブラウザ毎にフォントも、文字サイズも違います。
これらは、ブラウザの設定で簡単に変更が可能です。

この時に選択出来るフォントの種類は、概ね5種類くらいのフォントになります。
その5種類と言うのは、OSに関係なく一般的に搭載されている、【基本フォント】というものになります。

つまりブラウザで使用しているフォントは、
【使用するPCに搭載されているフォント】
と言う事になります。

では、PCに搭載されているフォントであれば、何を使ってもいいのか? と言うと……ダメです。

初心者にありがちな、欲望としてCSSなどを使って、部分的にフォントの指定(見出しタグ等)をして、見た目の綺麗なモノを作ってみたいと思われるでしょうが、それは意味の無い事なのです。

先ほど言ったように、【使用するPCに搭載されているフォント】で無ければ、ブラウザではそのフォントは表示しません。

つまり、自分のPCにはある(搭載)フォントは、必ずしも閲覧者(ユーザー)が観るPCにそのフォントが有る(搭載されている)とは限りません。もし指定したフォントが無ければ、代替えフォント※1に置き換えられてしまい、せっかく用意したデザインが(見た目)無意味な物になってしまいます。

この為にフォントの指定はするな。と言う事が言われているのです。

では、何故CSSによってフォントを指定しているか? ますます解らないですよね?

解答としては、複数のブラウザで同じ表示にするため。

と言う事です。確かにフォントの指定はしていますが、それは【ターゲットブラウザ】に対して、可能な限り同じ表示にする、一つのテクニックなのです。

ブラウザはそれぞれに初期設定のフォントやサイズが違います。しかし、それでは閲覧するブラウザによって、見え方が大きく異なる可能性が出てきます。

製作側としては、ブラウザが変わっても、同じ様に見える事が望ましい※2のでサイト内のフォントと、フォントサイズを指定することで、同じ見た目を保つようにしています。

もちろん指定するフォントは標準的なブラウザフォントです。

つまり、【フォントの指定をするな】とは標準的なフォント以外のモノ(フォント)を使うなという意味です。
いい変えれば、標準フォントであれば多少の装飾はOKとなります。


どうしても、標準以外の綺麗なフォントを使いたい場合※3、手段が無いことはありませんが、以下の条件が必要になります。

1.著作権フリーなフォントである。
2.JIS第二水準までのフォントデータをもつ事。
3.OSに依存しない汎用フォーマット、または一般的なフォントであること。

などの条件全てをクリア出来れば、フォントデータをWebサーバー上にUPして、CSSにてフォント指定をすれば、ブラウザでの使用も可能になります。

まぁ、かなり高いハードルですが。

いずれにしても、CSSによるフォント指定は、汎用フォントで、複数のブラウザでの表示を同じ様に見せるためのテクニックという事を覚えておいてください。





代替えフォント※1
CSSで指定したフォントが無い場合、ブラウザの設定フォントに置換されます。


同じ様に見える事が望ましい※2
製作としては、最低でもターゲットブラウザに対しては、全て同じ様に表示される事が望ましいのですが、必ずしも同じにならない事があります。


標準以外の綺麗なフォントを使いたい場合 WEBフォントを使う※3
WEB上に公開してあるフォントデーターを利用する方法で、ブラウザーで使用できる形にしたもの。
日本語対応のものもあるが、基本的に有料のものが多い。






神奈川県を中心として主に横浜・川崎・東京23区西部の中小企業・個人事業主向けホームページを制作しております。 横浜本田WEB


横浜本田WEB Facebookページ
http://www.facebook.com/hondaweb?fref=ts

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


Facebookへ投稿