【CSS入門】fontをマスター【family・size・weightなど 】

この記事ではCSSのfontについて解説します。

fontとは？

fontに関する指定を一括でできるショートハンドです。

CSS

font: スタイル スモールキャップ 太さ サイズ/行の高さ 種類;
 
font: italic normal bold 100%/1.7 arial;

実際にはショートハンドを使う事はほとんどないので、個々のプロパティを覚えるようにしておきましょう。

fontプロパティ詳細

fontで使用するプロパティは以下の通りです。

font-style

フォントのスタイルを指定します。

font-styleに指定できる値は以下の通りです。

italicを指定しても、イタリック体がないフォントのときは斜体フォント表示され、反対にobliqueを指定しても、斜体フォントがないフォントのときはイタリック体で表示されます。

日本語フォントではイタリック体や斜体は基本的に使いません。

HTML

<p>このfont-styleはitalicです。</p>

CSS

p{
  font-style: italic;
}

font-variant

フォントをスモールキャップ（小文字の大きさの大文字）にするかどうかを指定します。

スモールキャップは基本的には英語の文章で使われます。font-variantに指定できる値は以下の通りです。

フォントにスモールキャップがない時は、大文字を縮小したものを小文字として表示します。

HTML

<p>このfont-variantはsmall-capsです。</p>

CSS

p{
  font-variant: small-caps;
}

font-weight

フォントの太さを指定します。

font-weightに指定できる値は以下の通りです。

基本、値はキーワードで指定しますが、数字で指定する事も出来ます。

数値での指定の場合100〜900まで9段階数字で指定ができます。400はnormalと同じで、400より数値が小さいと細く、数値が大きいと太くなります。

HTML

<p>このfont-weightはboldです。</p>

CSS

p{
  font-weight: bold;
}

font-size

フォントのサイズを指定します。

font-sizeに指定できる値は以下の通りです。

mediumなどのサイズで指定の場合、xx-smal〜xx-largeまで7段階で指定でき、mediumは標準で1段階上がると1.2倍のサイズになります。

HTML

<p>このfont-sizeは2emです。</p>

CSS

p{
  font-size: 2em;
}

line-height

行の高さを指定します。

line-heightに指定できる値は以下の通りです。

単位なしでの記述をよく使います。

以下の場合font-size16pxに対してline-height2を掛けて、行の高さが32pxになります。32px（行の高さ）から16px（フォントサイズ）を引いた残りの16pxが、行間として上下均等に8pxずつ割り振られます。

HTML

<p>これはline-height: 2です。</p>

CSS

p{
  font-size: 16px;
  line-height: 2;
}

font-family

フォントの種類を指定します。

以下の場合、Open Sansというフォントを指定したことになります。

CSS

font-family: 'Open Sans',sans-serif;

font-familyの指定にはいくつかのルールがあるので一つづつ見ていきます。

複数の種類を指定する

ユーザーの環境によって入っているフォントが異なるので、カンマ（,）で区切って複数の種類を指定します（前に書かれたフォントが優先されます）。

CSS

font-family: 候補1,候補2,候補3,総称フォント;
 
font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif;

引用符で囲む

スペースがあるフォント名や日本語が入ったフォント名は、引用符（” 又は ‘）で囲みます。

英語フォントは先に書く

アルファベットには英語フォントを、日本語文字には日本語フォント適用させる為に、英語フォントは日本語フォントより先に書きます。

万が一、アルファベットも日本語フォントで表示したい場合は、日本語フォントを前に書きます。

総称フォントファミリー

最後に書いてあるsans-serifやserifというのは「総称フォントファミリー名」と呼ばれるもので、必ず一番最後に書きます。

これは、サイトを見たユーザーが指定したフォントを利用できない場合に、最低限近いフォントを用意しておくためのものです。実際にどういうフォントが使われるかはブラウザによリます。

まとめ

fontは覚えることは多いですけど何度か使っているうちに自然と覚えていくと思うので、使いこなすまでにそこまで時間はかからないはずです。

font-familyやfont-sizeなどで迷ったら、好きなサイトや有名なサイトが使っているfont-familyなどを調べてみて真似をするのもアリだと思います。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。