CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSフォントプロパティ徹底解説！font-familyやfont-sizeの使い方と実例

CSSのフォントプロパティを使うことで、Webページ上のテキストの見た目を自由にカスタマイズできます。本記事では、テキストのスタイリングに役立つ主要なフォント関連プロパティを、実際のコード例とともにわかりやすく解説します。

CSSの主要なフォントプロパティ一覧

font-family

要素に適用するフォント（書体）を指定するためのプロパティです。複数のフォント名をカンマ区切りで列挙でき、先頭から順に利用可能なものが適用されます。

font-kerning

文字間隔を均一に整え、可読性を高めるために使用するプロパティです。ただし、この機能はフォント側がカーニング情報を持っている場合にのみ有効となる点に注意が必要です。

font-size

フォントのサイズを指定するプロパティです。px、em、rem、%など、さまざまな単位で指定できます。

font-stretch

一部のフォントには、condensed（幅狭）やexpanded（幅広）といった複数のフェイスが用意されています。font-stretchプロパティを使用すると、これらのフォントの幅を指定できます。

font-style

テキストを斜体（イタリック）にして表示するためのプロパティです。normal、italic、obliqueの値が指定可能です。

font-variant

要素のテキストをスモールキャップス（小型大文字）で表示するかどうかを指定できるプロパティです。

font-weight

文字の太さを指定するプロパティです。normal、boldのほか、100〜900までの数値でも細かく指定できます。

さらに、これらすべてのプロパティを一行でまとめて指定できる省略形のfontプロパティも用意されています。

fontプロパティの構文

fontプロパティの基本的な構文は以下のとおりです。

Selector {
   font: /*値*/
}

それでは、CSSのフォントプロパティの具体的な使用例を見ていきましょう。

使用例1：font-styleで斜体を表現する

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 3px;
   float: left;
   font-family: "Matura MT Script Capitals";
   font-size: 200%;
}
#a {
   font-style: normal;
}
#b {
   font-style: italic;
}
#c {
   font-style: oblique 40deg;
   font-family: "Harlow Solid Italic";
}
</style>
</head>
<body>
<div id="a">Normal Demo</div>
<div id="b">Italic Demo</div>
<div id="c">Oblique Demo</div>
</body>
</html>

出力結果

上記のコードを実行すると、normal（標準）、italic（斜体）、oblique（傾斜）それぞれのスタイルが適用されたテキストが表示されます。

CSSフォントプロパティ徹底解説！font-familyやfont-sizeの使い方と実例

使用例2：font-familyでリストの書体を変える

<!DOCTYPE html>
<html>
<head>
<style>
* {
   font-size: 1.1em;
   list-style: circle;
}
li:first-child {
   background-color: seashell;
   font-family: cursive;
}
li:nth-child(2) {
   background-color: azure;
   font-family: "Brush Script Std", serif;
}
li:last-child {
   background-color: springgreen;
   font-family: "Gigi", Arial;
}
</style>
</head>
<body>
<h2>Learning Scala</h2>
<ul>
<li>Scala is a pure object-oriented language in the sense that every value is an object.</li>
<li>Scala is compiled into Java Byte Code which is executed by the Java Virtual Machine (JVM).</li>
<li>Scala provides a lightweight syntax for defining anonymous functions</li>
</ul>
</body>
</html>

出力結果

この例では、擬似クラス（first-child、nth-child(2)、last-child）を使って各リスト項目ごとに異なるフォントファミリーを適用しています。フォールバックとして代替フォントも指定している点がポイントです。

CSSフォントプロパティ徹底解説！font-familyやfont-sizeの使い方と実例

まとめ

CSSのフォントプロパティを活用すれば、書体・サイズ・太さ・斜体などを細かく制御でき、ページ全体のデザイン性と可読性を大きく向上させられます。特にfont-familyでは必ずフォールバック用のフォントを併せて指定しておくと、環境による表示崩れを防げます。ぜひ実際のコードで試してみてください。

  1. CSSのunicode-bidiプロパティとは？テキストの書字方向を制御する方法

    CSSのunicode-bidiプロパティは、多言語対応のためにテキストの書字方向（双方向テキスト）を上書きするかどうかを設定するためのプロパティです。アラビア語やヘブライ語のように右から左へ記述される言語（RTL言語）と、日本語や英語のような左から右へ記述される言語（LTR言語）が混在するコンテンツで特に役立ちます。unicode-bidiプロパティの主な値normal：デフォルト値。追加の埋め込みレベルを適用しません。bidi-override：directionプロパティで指定した方向に従い、テキストの並び順を強制的に上書きします。isolate：要素内のテキストを周囲のテキストから分離

  2. CSSのfontプロパティを使ってアニメーションを実行する方法

    CSSでは、fontプロパティにもアニメーションを適用することができます。@keyframesルールとanimationプロパティを組み合わせることで、フォントサイズや書体が変化するアニメーションを作成できます。 実装例 以下のコードは、段落テキストのフォントが徐々に大きく変化するアニメーションの例です。実際にブラウザで表示して動作を確認してみてください。 <!DOCTYPE html> <html>    <head>       <style>       &nb