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

Web

sans-serifって何?

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

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

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

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

serif

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

css
font-family: serif;
ブラウザでの表示
ALLNIGHT 1234 夜もすがら

sans-serif

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

CSS
font-family: sans-serif;
ブラウザでの表示

ALLNIGHT 1234 夜もすがら

cursive

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

CSS
font-family: cursive;
ブラウザでの表示
ALLNIGHT 1234 夜もすがら

fantasy

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

CSS
font-family: fantasy;
ブラウザでの表示
ALLNIGHT 1234 夜もすがら

monospace

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

CSS
font-family: monospace;
ブラウザでの表示
ALLNIGHT 1234 夜もすがら
ALL NIGHT 5678
タイトルとURLをコピーしました