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

CSSのfont-familyプロパティの使い方を解説

CSSの font-family プロパティは、テキストに表示されるフォントの種類（書体）を指定するために使用されます。値には、フォントファミリー名を1つまたは複数指定できます。

font-familyの基本的な書き方

フォント名をカンマで区切って複数指定すると、左側から優先的に適用されます。ユーザーのシステムに最初のフォントが存在しない場合、次のフォントが代替として使用され、最終的にどのフォントも利用できない場合に備えて、serif や sans-serif などの総称ファミリー（キーワード）を最後に指定するのが一般的です。

使用例

以下は、フォントに「georgia」「garamond」を優先順に指定し、どちらも利用できない場合は標準のセリフ体（serif）で表示する例です。

<html>
   <head>
   </head>
   <body>
      <p style = "font-family:georgia,garamond,serif;">
         このテキストは、システムにインストールされているフォントに応じて、
         georgia、garamond、またはデフォルトのserifフォントで表示されます。
      </p>
   </body>
</html>

フォント名に空白が含まれる場合の注意点

「Times New Roman」のようにフォント名に空白が含まれる場合は、"Times New Roman" のように引用符（シングルクォートまたはダブルクォート）で囲む必要があります。空白を含まないフォント名は、引用符なしで指定しても問題ありません。

主な総称ファミリーの種類

フォント指定の最後に記述する総称ファミリーには、以下のような種類があります。

  • serif：明朝体のような、文字の端に飾り（セリフ）がある書体
  • sans-serif：ゴシック体のような、飾りのない書体
  • monospace：すべての文字が同じ幅で表示される等幅フォント
  • cursive：筆記体のような手書き風の書体
  • fantasy：装飾的な書体

このように font-family プロパティを活用することで、環境に左右されずに意図したデザインに近いフォント表示を実現できます。

  1. CSSのborder-left-widthプロパティで左ボーダーの幅を指定する方法

    CSSのborder-left-widthプロパティは、要素の左側の境界線（ボーダー）の太さを変更するために使用します。このプロパティを使うことで、左ボーダーだけの幅を個別に調整できます。使用例以下のコードは、border-left-widthプロパティを実装した実際の例です。<html>    <head>    </head>    <body>       <p style = "border-left-width:6px;border

  2. CSSのlist-style-typeプロパティでリストの行頭記号を自由に変更する方法

    CSSのlist-style-typeプロパティを使用すると、リスト項目の先頭に表示されるマーカー(行頭記号)の形状や見た目を自由にコントロールできます。デフォルトの黒丸(disc)だけでなく、白丸や四角、数字、アルファベットなど、さまざまなスタイルを指定できるのが特徴です。 list-style-typeの主な値 disc:黒丸(初期値) circle:白丸(中抜きの丸) square:塗りつぶしの四角形 decimal:算用数字(1、2、3...) lower-alpha:小文字アルファベット(a、b、c...) upper-alpha:大文字アルファベット(A、B、C...) none