フォントのスタイル


フォントに関するスタイルを紹介します。

font-sizeプロパティ

フォントサイズを指定します。指定方法は以下のとおりです。

数値+単位
単位には、「px(ピクセル)」「pt(ポイント)」「em(エム)」などが良く使われます。
数値+%
親要素に対するパーセントで指定します。
キーワード
フォントサイズを指定するキーワードを使用します。
xx-small/x-small/small/medium/large/x-large/xx-large

font-weightプロパティ

フォントの太さを指定します。指定方法は以下のとおりです。

normal
通常の太さで表示します。
bold
太字で表示します。
bolder
1段階太く表示します。
lighter
1段階細く表示します。

font-styleプロパティ

フォントのスタイルを指定します。指定方法は以下のとおりです。

normal
通常のスタイルで表示します。
italic
イタリック体で表示します。
oblique
斜体で表示します。

日本語フォントの場合はイタリック書体がありませんので、通常の書体を斜めにした「斜体」で表示されます。イタリック書体が用意されている欧文フォントでは、筆記体に近い「イタリック体」で表示されるようです。

font-familyプロパティ

フォントの種類を指定します。指定方法は以下のとおりです。

“フォント名”
フォント名そのものを指定します。フォント名にスペースを含む場合はダブルクォーテーション「”」でくくるのが必須ですが、スペースを含まなくてもくくっておくと、間違いがありません。
フォントグループ名
フォントグループ(系統)を指定します。
serif(明朝系、セリフ体)
sans-serif(ゴシック系、サンセリフ体)
cursive(筆記体系)
fantasy(装飾系)
monospace(等幅)

複数のフォント名やフォントグループ名をカンマ「,」で区切って指定ですると、前にあるものが優先的に適用されるため、主に「Win用のフォント,Mac用のフォント,フォントグループ名」という形式で指定されます。

また、環境によってはフォント名をアルファベットで表記しないと適用されないこともあるので注意が必要です。
<例> font-family:”游ゴシック”,”Yu Gothic”;

line-heightプロパティ

行の高さを指定します。フォントサイズ(font-size)と同じ値にすると、行間が0になります。指定の方法は以下のとおりです。

数値+%
高さをパーセントで指定します。
数値
倍数で指定します。「2」=「200%」ということになります。
数値+単位
単位は「px(ピクセル)」「pt(ポイント)」「em(エム)」など、フォントサイズに合わせた単位が良く使われます。
normal(デフォルト)
「100%」と同じです。

日本語の場合デフォルトの100%では、行間が詰まって見えるため、段落などでは1.5~2倍の行間をあけると文章が読みやすくなります。

また、「数値+単位」を使用する場合、フォントサイズより小さくすると行が重なってしまうので注意しましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です