CSS-フォント

この章では、HTML要素で利用可能なコンテンツのフォントを設定する方法を説明します。あなたは要素の次のフォントプロパティを設定することができます-

font-family プロパティは、フォントのフェイスを変更するために使用されます。
font-style プロパティは、フォントを斜体または斜体にするために使用されます。
font-variant プロパティは、スモールキャップ効果を作成するために使用されます。
font-weight プロパティを使用して、フォントの太さまたは明るさを増減します。
font-size プロパティは、フォントのサイズを増減するために使用されます。
font プロパティは、他の多くのフォントプロパティを指定するための省略形として使用されます。

フォントファミリを設定する

以下は、要素のフォントファミリを設定する方法を示す例です。可能な値は、任意のフォントファミリ名です。

<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

フォントスタイルを設定する

以下は、要素のフォントスタイルを設定する方法を示す例です。可能な値は、_normal、斜体、および斜体_です。

<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         This text will be rendered in italic style
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

フォントバリアントを設定する

次の例は、要素のフォントバリアントを設定する方法を示しています。可能な値は、_normalおよびsmall-caps_です。

<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         This text will be rendered as small caps
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

フォントの太さを設定する

次の例は、要素のフォントの太さを設定する方法を示しています。 font-weightプロパティは、フォントの太さを指定する機能を提供します。可能な値は、_normal、bold、bolder、lighter、100、200、300、400、500、600、700、800、900_です。

<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         This font is bold.
      </p>

      <p style = "font-weight:bolder;">
         This font is bolder.
      </p>

      <p style = "font-weight:500;">
         This font is 500 weight.
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

フォントサイズを設定する

次の例は、要素のフォントサイズを設定する方法を示しています。 font-sizeプロパティは、フォントのサイズを制御するために使用されます。可能な値は、_xx-small、x-small、small、medium、large、x-large、xx-large、smaller、large、ピクセルまたは％_のサイズです。

<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>

      <p style = "font-size:small;">
         This font size is small
      </p>

      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

フォントサイズの調整の設定

次の例は、要素のフォントサイズ調整を設定する方法を示しています。このプロパティを使用すると、x-heightを調整してフォントを読みやすくすることができます。可能な値は任意の数値です。

<html>
   <head>
   </head>

   <body>
      <p style = "font-size-adjust:0.61;">
         This text is using a font-size-adjust value.
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

フォントストレッチを設定する

次の例は、要素のフォントストレッチを設定する方法を示しています。このプロパティは、ユーザーのコンピューターに依存して、使用されているフォントの拡張バージョンまたは圧縮バージョンを持っています。

可能な値は、「通常」、「幅」、「幅」、「超凝縮」、「超凝縮」、「凝縮」、「半凝縮」、「半展開」、「展開」、「拡張」、「超展開」です。

<html>
   <head>
   </head>

   <body>
      <p style = "font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer
         doesn't have a <br>condensed or expanded version of the font being used.
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

略記プロパティ

_font_プロパティを使用して、すべてのフォントプロパティを一度に設定できます。たとえば-

<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Applying all the properties on the text at once.
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

Css-fonts

CSS-フォント

フォントファミリを設定する

フォントスタイルを設定する

フォントバリアントを設定する

フォントの太さを設定する

フォントサイズを設定する

フォントサイズの調整の設定

フォントストレッチを設定する

略記プロパティ

目次