CodeGym/コース/Frontend SELF JA/フォントのプロパティ

フォントのプロパティ

使用可能

4.1 プロパティ font-style

CSSにはWebページ上のフォントやその表示を管理するためのたくさんのプロパティがあるよ。プロパティ font-style, font-variantfont-stretchはテキストのスタイル、表示、幅をカスタマイズするのに役立つんだ。それぞれのプロパティをもう少し詳しく見てみよう。

プロパティfont-styleはテキストのスタイルを決めるよ。これを使って斜体(イタリック)や通常のテキストスタイルを設定できるんだ。

値:

  • normal: 通常のテキストスタイル(デフォルト)
  • italic: 斜体テキスト(イタリック)
  • oblique: 斜体テキスト。イタリックに似ているけど、傾き方が違うよ。

使用例:

CSS
.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}
HTML
<body>
  <p class="normal">これは通常のテキストです。</p>
  <p class="italic">これは斜体テキストです(イタリック)。</p>
  <p class="oblique">これは斜体テキストです(oblique)。</p>
</body>

4.2 プロパティ font-variant

プロパティfont-variantはテキストをスモールキャップスで表示するのを管理するよ。これを使うと、全ての文字を大文字にして、小文字の文字には小さいサイズを割り当てられるんだ。

値:

  • normal: 通常のテキスト(デフォルト)
  • small-caps: スモールキャップスのテキスト

使用例:

CSS
.normal {
  font-variant: normal;
}

.small-caps {
  font-variant: small-caps;
}
HTML
<body>
  <p class="normal">これは通常のテキストです。</p>
  <p class="small-caps">これはスモールキャップスのテキストです。</p>
</body>

追加の値 (CSS Fonts Level 4)

CSS Fonts Level 4はfont-variantプロパティに、all-small-caps, petite-caps, all-petite-caps, unicase, titling-capsのような追加の値を提供するよ。ただし、これらは全てのブラウザでサポートされているわけじゃないんだ。

4.3 プロパティ font-stretch

プロパティfont-stretchはフォントの圧縮や引き伸ばしの度合いを管理するよ。フォントの高さに影響を与えずに幅を変えるんだ。適切なフォントバリエーションがあれば、それを選ぶのにも役立つんだ。

値:

  • normal: 通常のフォント幅(デフォルト)
  • ultra-condensed: 一番圧縮されたフォント
  • extra-condensed: とても圧縮されたフォント
  • condensed: 圧縮されたフォント
  • semi-condensed: 少し圧縮されたフォント
  • semi-expanded: 少し引き伸ばされたフォント
  • expanded: 引き伸ばされたフォント
  • extra-expanded: とても引き伸ばされたフォント
  • ultra-expanded: 一番引き伸ばされたフォント

使用例:

CSS
.normal {
  font-stretch: normal;
}

.condensed {
  font-stretch: condensed;
}

.expanded {
  font-stretch: expanded;
}
HTML
<body>
  <p class="normal">これは通常幅のテキストです。</p>
  <p class="condensed">これは圧縮幅のテキストです。</p>
  <p class="expanded">これは引き伸ばし幅のテキストです。</p>
</body>
1
タスク
Frontend SELF JA,  レベル 14レッスン 3
ロック未解除
テキストのスタイル
テキストのスタイル
1
タスク
Frontend SELF JA,  レベル 14レッスン 3
ロック未解除
フォントの伸縮
フォントの伸縮
コメント
  • 人気
  • 新規
  • 古い
コメントを残すには、サインインしている必要があります
このページにはまだコメントがありません