文字の表現3【CSS】
今回は文字フォントを取り上げます。
フォントを指定する場合には、基本的にローカル(各ユーザーのPC)環境により大きな影響を受けます。つまり、そのPCに指定したフォントがインストールされているかどうかによって表示されるかどうかが決まってしまいます。(通常、ワードプロセッサソフトや年賀状ソフトなどアプリケーションソフトをインストールすることで多くのフォントも一緒にインストールされます。)
それはHTMLでも同様でした。
そしてHTML、CSSともに指定したフォントがPC上にインストールされていなければ、比較的近いフォントやデフォルトフォントで表示されます。
このようなことから、フォントを指定するときは自分のイメージしているページデザインに近いフォントを複数個指定するのが普通です。後述しますがHTMLやCSSの記述で列挙しておけば先頭から順番に優先して表示されます。すべてが存在しなければデフォルトフォントで表示されます。
さて、このフォントの指定もサイトのフォントを揃えるためには外部CSSとして記述し、それを各HTMLファイルから読み込むのが最も効率的だと思います。そうすることで、CSSファイルのフォント名を書き換えればサイト内のすべてのフォントを一括して変更できます。
今回の説明は記述方法のみで表示見本などは割愛しておきます。実際にサーバーへページをアップロードしてお確かめください。
【文字フォントの指定】
まずはいつもどおりHTMLでの記述です。<font>タグにfaceという属性をつけます。
<font
face="Century Gothic,sans-serif">
フォントは左側から優先的に設定され、いずれもなければデフォルトフォントが設定されます。
これをCSSで記述すると次のようになります。設定の優先順はHTMLと同じです。
p {

font-family:
Century Gothic,sans-serif
;

}
上は<p>〜</p>間の文字フォントをCentury
Gothicに、もしCentury Gothicがなければsans-serifを優先的に設定します。いずれもなければデフォルトフォントで表示されます。
※ |
デフォルトとは怠慢の意味で、コンピュータでは何かの値を指定しないことをいいます。
そして、デフォルト値とか、デフォルト...と表現する場合、代替値(初期値。文字列含む)をいいます。 |
詳細はクラスで説明します。
※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。
|