CSS 資料型別 - <absolute-size>



CSS <absolute-size> 資料型別在 font 簡寫屬性和 font-size 屬性中定義絕對字型大小。

可能的值

  • xx-small − 指定字型大小為中等大小的 60%,相當於已棄用的 size="1"。

  • x-small − 指定字型大小為預設字型大小的 75%。

  • small − 指定字型大小為預設字型大小的 89%,相當於已棄用的 size="2"。

  • medium − 使用者首選大小。它指定預設字型大小作為參考中間值,相當於已棄用的 size="3"。

  • large − 指定字型大小比預設字型大小大 20%,相當於已棄用的 size="4"。

  • x-large − 指定字型大小比預設字型大小大 50%,相當於已棄用的 size="5"。

  • xx-large − 指定字型大小是預設字型大小的兩倍,相當於已棄用的 size="6"。

  • xxx-large − 指定字型大小是預設字型大小的三倍,相當於已棄用的 size="7"。

語法

font-size = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large;

下表顯示了不同 absolute-size 關鍵字的縮放比例。它還顯示了這些關鍵字與標題大小 (<h1> 到 <h6>) 和已棄用的 HTML size 屬性之間的關係。

<absolute-size> xx-small x-small small medium large x-large xx-large xxx-large
縮放比例 3/5 3/4 8/9 1 6/5 3/2 2/1 3/1
HTML 標題 h6 h5 h4 h3 h2 h1
HTML size 屬性 1 2 3 4 5 6 7

CSS <absolute-size> - 示例

以下示例演示了使用 font-size 屬性的不同字型大小:

<html>
<head>
<style>
   p {
      margin-bottom: 5px;
   }
   .font-xx-small {
      font-size: xx-small;
   }
   .font-x-small {
      font-size: x-small;
   }
   .font-small {
      font-size: small;
   }
   .font-medium {
      font-size: medium;
   }
   .font-large {
      font-size: large;
   }
   .font-x-large {
      font-size: x-large;
   }
   .font-xx-large {
      font-size: xx-large;
   }
   .font-xxx-large {
      font-size: xxx-large;
   }
</style>
</head>
<body>
   <p class="font-xx-small">xx-small</p>
   <p class="font-x-small">x-small</p>
   <p class="font-small">small</p>
   <p class="font-medium">medium</p>
   <p class="font-large">large</p>
   <p class="font-x-large">x-large</p>
   <p class="font-xx-large">xx-large</p>
   <p class="font-xxx-large">xxx-large</p>
</body>
</html>
廣告