フォントファミリーを決める

概要




のようにして設定する。

結果(コードは後述)

これはserif（明朝体系列）です。

これはserif（ゴシック系列）です。

serifがsans-serifより優先して表示されます

HTMLファイル

CSSファイル

説明


指定したフォントをユーザー（ブラウザを見る人）がインストールしていない場合
そのブラウザで指定されているデフォルトのフォントで表示される。
だから必ずしも製作者の意図したフォントで表示されるとは限らない。

日本語のフォント名の指定を読み込めないブラウザもあるので、
できれば英語で書くのが望ましい
日本語で指定する場合、'か"で囲む。
スペースがある場合も'か"で囲むように。

複数指定する場合はカンマで区切る。
この際先に指定したものから優先的に適用される。


フォントファミリーの特徴

明朝体
細い文字なので長文でも読みやすい。
丁寧でかしこまった印象。

ゴシック体
太いので見出しやタイトルに向いている。
要点とかにも適している。太いので遠くからでも見やすい。

装飾系
タイトルや見出しに使う。長文だと読みにくい。

一つのサイトでは使うフォントは３種類までにまとめたい。

font-waightは文字の太さを変えるが
これが指定されていないファミリーもあるので、
そういうファミリーではfont-weightを使っても意味がない。

間違えやすい問題