極客書

CSS - Fonts

本章教您如何設置HTML元素中可用的內容字體。可以設置元素的以下字體屬性−

  • 字體系列屬性用於更改字體的面。

  • 字體樣式屬性用於使字體傾斜或傾斜。

  • 字體變量屬性用於創建小型大寫字母效果。

  • 字體粗細屬性用於增加或減少字體粗細的顯示方式。

  • 字體大小屬性用於增大或減小字體大小。

  • 字體屬性用作指定許多其他字體屬性的簡寫。

Set the Font Family

下面是一個示例，演示如何設置元素的字體系列。可能的值可以是任何字體系列名稱。

Live Demo 
<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>

這將產生以下結果&負;

Set the Font Style

下面是一個示例，演示如何設置元素的字體樣式。可能的值爲正常、斜體和斜。

Live Demo 
<html>
   <head>
   </head>

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

這將產生以下結果&負;

Set the Font Variant

下面的示例演示如何設置元素的字體變量。可能的值爲標準和小大寫。

Live Demo 
<html>
   <head>
   </head>

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

這將產生以下結果&負;

Set the Font Weight

下面的示例演示如何設置元素的字體粗細。font weight屬性提供指定字體粗體的功能。可能的值可以是普通、粗體、粗體、淺色、100、200、300、400、500、600、700、800、900。

Live Demo 
<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>

這將產生以下結果&負;

Set the Font Size

下面的示例演示如何設置元素的字體大小。font size屬性用於控制字體的大小。可能的值可以是x x small，x-small，small，medium，large，x-large，xx large，small，larger，size in pixels或in%。

Live Demo 
<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>

這將產生以下結果&負;

Set the Font Size Adjust

下面的示例演示如何設置元素的字體大小調整。此屬性使您能夠調整x高度以使字體更清晰。可能的值可以是任何數字。

Live Demo 
<html>
   <head>
   </head>

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

這將產生以下結果&負;

Set the Font Stretch

下面的示例演示如何設置元素的字體拉伸。此屬性依賴於用戶的計算機使用擴展或壓縮版本的字體。

可能的值可以是正常值、更寬值、更窄值、超濃縮值、超濃縮值、濃縮值、半濃縮值、半膨脹值、膨脹值、超膨脹值、超膨脹值。

Live Demo 
<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>

這將產生以下結果&負;

Shorthand Property

您可以使用字體屬性一次設置所有字體屬性。例如−

Live Demo 
<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>

這將產生以下結果&負;