フォント関連（color、font-size、font-weight、font-family、font-style、font-variant）プロパティの仕様と使い方

カテゴリ：CSS編

フォント関連プロパティ

フォントに関する主なプロパティは以下となります。
よく使用するものはcolor、font-size、font-familyになるでしょう。

color

文字色をカラーネームもしくはカラーコードで指定します。

カラーネーム、カラーコードについてはカラーネーム・カラーコード一覧をご参照ください。

例）
カラーネームによる指定：

p.font-color-1 {
    color: red;
}

カラーコードによる指定：

p.font-color-2 {
    color: #0066FF;
}

p.font-color-3 {
    color: rgb(0,206,209);
}

font-size

文字の大きさをキーワードもしくは単位で指定します。
大きさの単位は一般的に、px、em、%が用いられます。

使用できる単位についてはCSSで使用できる単位をご参照ください。

キーワード

例）
キーワードによる指定：

p.font-size-1 {
    font-size: large;
}

pxによる指定：

p.font-size-2 {
    font-size: 20px;
}

font-weight

文字の太さをキーワードもしくは数値で指定します。

キーワード

例）
キーワードによる指定：

p.font-weight-1 {
    font-weight: bold;
}

数値による指定：

p.font-weight-2 {
    font-weight: 800;
}

font-family

フォント名もしくはフォントの種類を指定します。
カンマ区切りで複数指定した場合、先頭から優先的に利用可能なフォントが選択されます。
フォント名にスペースが含まれる場合はシングルクォートかダブルクォートで囲みます。

クライアントOSによって持っているフォントが異なるため、典型的には各OSごとに見た目が近いフォントを指定します。そうすることでWindows環境で見た場合とmacOS環境で見た場合とで、できるだけ違和感がないように表示する事ができます。

参考なお、すべてのプラットフォームでフォントを統一する手法としてWebフォントを使用する方法があります。

フォント名

各OSの代表的なフォントは以下になります。

font-familyで指定できるフォントの種類

フォントの種類で指定した場合、Webブラウザ側で設定されている指定した種類に対応したフォントが選択されます。
つまりOSやWebブラウザでどのフォントが使用されるかが異なります。
例えばsans-serifの場合、Windows 10 の Microsoft Edge ではメイリオ、macOS の safari ではヒラギノ角ゴ ProNが選択されます。

代替フォントとも呼ばれ、通常はフォント名の後に（最後に）指定します。

例）

body {
    font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}

font-style

文字のスタイル（文字の傾き）をキーワードで指定します。
日本語では斜体を使用する文化はなく、メイリオなどイタリック体や斜体が用意されていない日本語フォントもあります。その場合は書体は変わりません（標準書体のまま）。
以下のサンプルのようにＭＳ Ｐゴシックではイタリック体や斜体で表示されているのに対し、メイリオの場合、イタリック体や斜体が反映されていないのが分かります。

例）
イタリック体を指定：

p.font-style-1 {
    font-style: italic;
}

斜体を指定：

p.font-style-2 {
    font-style: oblique;
}

Note ＭＳ Ｐゴシックのように「イタリック体」と「斜体」の両方が用意されていないフォントの場合、「イタリック体」も「斜体」同じ書体になります。

font-variant

font-variantは日本ではあまり馴染みのないプロパティですが、small-capsのキーワードを指定した場合、小文字部分を小文字サイズの大文字（スモールキャップ）で表示します。
以下のサンプルでは、Fontのont部分が小文字サイズの大文字になっていることが分かります。

例）
スモールキャップを指定：

p.font-variant-1 {
    font-variant: small-caps;
}

以上、フォント関連のプロパティを解説いたしました。

公開日時：2019年06月22日 14:47:13