sans-serifって何?意味と使用方法を解説

sans-serifって何?

CSSでfont-familyを指定するときに必ず記述する「sans-serif」や「serif」といったキーワード。

これは指定したフォントが利用できない場合に、最低限どのような系統のフォントを利用するのかを指定するためのもので、「一般ファミリー」と呼ばれます。

通常は、
[su_highlight]font-family: ‘任意のフォント’, ‘任意のフォント’, sans-serif;[/su_highlight]
のように、任意のフォントの最後に指定します。

一般ファミリーには、「serif」「sans-serif」「cursive」「fantasy」「monospace」の5種類があり、それぞれ表示されるフォントが異なります。

serif

「serif」は明朝体のフォントを表示するファミリーです。

[su_box title=”css” box_color=”#444″]font-family: serif;[/su_box] [su_box title=”ブラウザでの表示” box_color=”#444″]ALLNIGHT 1234 夜もすがら[/su_box]

sans-serif

「sans-serif」はゴシック体のフォントを表示するファミリーです。

[su_box title=”CSS” box_color=”#444″]font-family: sans-serif;[/su_box][su_box title=”ブラウザでの表示” box_color=”#444″]

ALLNIGHT 1234 夜もすがら

[/su_box]

cursive

「cursive」は手書き文字風のフォントを表示するファミリーです。英数字に適用され、日本語はゴシック体などのフォントで表示されます。

[su_box title=”CSS” box_color=”#444″]font-family: cursive;[/su_box][su_box title=”ブラウザでの表示” box_color=”#444″]ALLNIGHT 1234 夜もすがら[/su_box]

fantasy

「fantasy」は装飾文字のフォントを表示するファミリーです。英数字に適用され、日本語はゴシック体などのフォントで表示されます。

[su_box title=”CSS” box_color=”#444″]font-family: fantasy;[/su_box][su_box title=”ブラウザでの表示” box_color=”#444″]ALLNIGHT 1234 夜もすがら[/su_box]

monospace

「monospace」は等幅フォントを表示するファミリーです。ソースコードなど、インデントをしっかり設定したいときに利用します。

[su_box title=”CSS” box_color=”#444″]font-family: monospace;[/su_box][su_box title=”ブラウザでの表示” box_color=”#444″]ALLNIGHT 1234 夜もすがら
ALL NIGHT 5678
[/su_box]

タイトルとURLをコピーしました