CSS入門 | CSS基本プロパティ | CSSフォント

Tags:

CSSを使うと、Webページに表示されるフォントをさまざまに設定できる。

CSS fontプロパティ

CSSで使用できるfontプロパティは次のとおりである。

プロパティ	説明
font	すべてのfontプロパティを使ったスタイルを1行で設定できる。
font-family	テキストのフォントファミリーを設定する。
font-style	主にイタリック体を使うために使用する。
font-variant	テキストに含まれる英字のうち、小文字だけをsmall-capsフォントに変更する。
font-weight	テキストをどれだけ太く表現するかを設定する。
font-size	テキストのサイズを設定する。

CSSフォントファミリー

CSSには2種類のフォントファミリーが存在する。

generic family: 似た形を持つフォントの集合。例としてSerif、Monospaceなどがある。
font family: 特定のフォントの集合。例としてTimes、Courierなどがある。

font-familyプロパティ

font-familyプロパティは、1つのフォントだけを設定することも、複数のフォントを一緒に設定することもできる。 font-familyプロパティ値に複数のフォントが設定されている場合、Webブラウザーは上から順にフォントを読み込む。ユーザーのコンピューターに最初に読み込んだフォントがなければ、次のフォントを確認する。このように読み込んだフォントが存在するかを順番に確認し、ユーザーのコンピューターに存在するフォントで表示する。

フォント名が複数の単語で構成される場合は、必ず引用符で囲む必要がある。また、複数のフォントを並べるときはカンマ(,)で区切る。

<style>
    .serif { font-family: "Times New Roman", Times, serif; }
    .sansserif { font-family: Arial, Helvetica, sans-serif; }
</style>

font-styleプロパティ

font-styleプロパティは主にイタリック体を使うために使用し、次の3つの値を持つ。

normal: テキストにどのようなスタイルも適用しない。
italic: テキストをイタリック体で表示する。
oblique: テキストを斜めにする。この値はitalicと非常に似ているが、サポートするWebブラウザーはほとんどない。

<style>
    .normal { font-style: normal; }
    .italic { font-style: italic; }
    .oblique { font-style: oblique; }
</style>

font-variantプロパティ

font-variantプロパティの値がsmall-capsに設定されると、テキストに含まれる英字のうち、すべての小文字をsmall-capsフォントに変更する。このとき、英字の大文字は元のサイズのまま出力される。 small-capsフォントとは、テキストの通常の大文字より少し小さいサイズの大文字を意味する。

<style>
    .normal { font-variant: normal; }
    .smallCaps { font-variant: small-caps; }
</style>

font-variantプロパティは韓国語には適用されず、英字にだけ適用される。

font-weightプロパティ

font-weightプロパティは、テキストをどれだけ太く表現するかを設定する。使用できる値には、lighter、normal、bold、bolderなどがある。また、100、200、300、…、900のように数字でテキストの太さを設定することもできる。

<style>
    .normal { font-weight: normal; }
    .bold { font-weight: 600; }
    .bolder { font-weight: bolder; }
</style>

font-sizeプロパティ

font-sizeプロパティは、テキストのサイズを設定する。

Webデザインでテキストのサイズは重要な表現要素だが、見出しを表現するためにテキストサイズだけを大きくしてはいけない。この場合は、HTML要素である<h1>から<h6>タグで見出しを表現する必要がある。

font-sizeプロパティ値

font-sizeプロパティ値は、次の2つの方式で表現できる。

絶対サイズ
相対サイズ

絶対サイズは、テキストのサイズを指定したサイズそのままに設定したいときに使う。絶対サイズで設定されたテキストは、すべてのWebブラウザーで同じサイズで表現される。

相対サイズは、テキストを囲んでいるHTML要素のサイズに応じてテキストのサイズも変わる方式である。また、ユーザーがWebブラウザーを通じてテキストのサイズを直接変更することもできる。

font-sizeのサイズ単位

font-sizeプロパティ値によく使われる代表的なサイズ単位は次のとおりである。

パーセント単位(%)は基本サイズを100%として、それに対する相対サイズを設定する。 em単位は、該当フォントの基本サイズを1emとして、それに対する相対サイズを設定する。ピクセル単位(px)は、画面のピクセルを基準にした絶対サイズを設定する。

<style>
    body { font-size: 100%; }
    #large { font-size: 2.5em; }
    #small { font-size: 0.7em; }
    #fixed { font-size: 20px; }
</style>

em単位で設定されたテキストは、ユーザーがWebブラウザーを通じてサイズを再調整できる。