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

CSSのfont-familyプロパティでフォントを指定する方法

font-familyプロパティとは

CSSの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'」のように引用符で囲みます。
  • 複数のフォントをフォールバック候補として指定することで、環境による表示の違いを最小限に抑えられます。
  • 最後に必ず汎用ファミリー（serif / sans-serif / monospace など）を指定すると安全です。
  1. CSSでリンクの色を設定する方法：:linkセレクターの使い方を解説

    Webページ上のリンクの色を変更したい場合、CSSの:link擬似クラスを使用します。この擬似クラスは、まだ訪問していないリンクに対してスタイルを適用するものです。指定できる値は、カラーネーム（例：red）やHEX値（例：#FF0000）、RGB値など、CSSで有効な任意のカラー形式です。:linkセレクターの基本構文a:link { color: カラー値; }サンプルコード以下のコードでは、未訪問のリンクの色を赤（#FF0000）に設定しています。実際にブラウザで実行して、リンクの色が変化することを確認してみましょう。<html> <head>

  2. CSSのfont-familyプロパティ完全ガイド！フォント指定の基本と実用例

    CSSのfont-familyプロパティは、選択した要素に特定のフォントを適用するために使用します。ブラウザやOSによって利用できるフォントが異なるため、複数のフォントをカンマ区切りで指定し、代替フォント（フォールバック）を設定してWebセーフフォントを活用することで、クロスブラウザ間の互換性を確保するのがおすすめです。 font-familyプロパティの構文 CSSのfont-familyプロパティは、以下のような構文で記述します。 セレクタ { font-family: /*値*/; } フォント名にスペースが含まれる場合は、Segoe Printのようにダブルクォーテーションで