font-size-adjust

語法

/* Keyword */
font-size-adjust: none;

/* One value: <number> or from-font */
font-size-adjust: 0.5;
font-size-adjust: from-font;

/* Two values */
font-size-adjust: ex-height 0.5;
font-size-adjust: ch-width from-font;

/* Global values */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: revert;
font-size-adjust: revert-layer;
font-size-adjust: unset;

值

font-size-adjust 屬性的值可以是一個關鍵字 none，一個值（<number> 或 from-font），或兩個值（<font-metric> 和 <number> 或 from-font）。

none

不對此回退字型的 font-size 值應用任何調整。

<font-metric> 可選

指定用於調整回退字型的首選字型度量。此引數接受下面列出的關鍵字之一。它是一個可選引數，如果未指定 <font-metric>，則使用 ex-height。

ex-height

使用 x-height（字型中小寫字母“x”的高度）與字型大小的比率（即縱橫比）來調整回退字型的字號。此關鍵字值用於在不同字型間規範化小寫字母。

cap-height

使用 cap-height（大寫字母的高度）與字型大小的比率來調整回退字型的字號。此關鍵字值用於在不同字型間規範化大寫字母。

ch-width

使用字元“0”（ZERO，U+0030）的進階寬度（字元在字型中佔據的水平空間）與字型大小的比率。此關鍵字值用於規範化字型的水平窄間距。

ic-width

使用字元“水”（CJK 水字，U+6C34）的進階寬度與字型大小的比率。此關鍵字值用於規範化字型的水平寬間距，特別是那些包含 CJK（中文、日文、韓文）字元的字型。

ic-height

使用字元“水”（CJK 水字，U+6C34）的進階高度（字元在字型中佔據的垂直空間）與字型大小的比率。此關鍵字值用於規範化字型的垂直寬間距，特別是那些包含 CJK 字元的字型。

<number>

根據指定的 <font-metric> 調整使用的字型大小。當未指定 <font-metric> 時（此時使用預設值 ex-height），<number> 值會調整回退字型的字號，使其 x-height 是字型大小的指定倍數。此值通常應與首選字型的縱橫比（x-height 與字型大小的比率）相匹配。這意味著，當首選字型可用時，無論瀏覽器是否支援 font-size-adjust，它都將一致地顯示。

當指定了 <font-metric> 值時，<number> 值會根據所選的 <font-metric> 調整字型大小，以在不同字型間為指定的字型度量保持一致的外觀。

<number> 值接受從 0 到無窮大的任何數字。0 會產生零高度的文字（即文字被隱藏）。負值無效。

from-font

使用第一個可用字型中指定 <font-metric> 的 <number> 值。

描述

為確保與不支援 font-size-adjust 的瀏覽器相容，此屬性被指定為 font-size 屬性的數字乘數。這個數字通常應與首選字型的縱橫比相匹配。

調整後的字型大小使用公式 u = ( m / m′ ) s 計算，其中：

• m 是指定的 <font-metric> 與首選字型大小的比率。

• m′ 是相應的 <font-metric> 與回退字型大小的比率。

• s 是 font-size 屬性的值。

• u 是回退字型新的、經過調整的字型大小。

考慮這個例子，看看調整後的字型大小是如何計算的。一個首選字型的 font-size 是 12px（s），其 cap-height 與字型大小的比率是 0.20（m）。回退字型中 cap-height 與字型大小的比率是 0.15（m′）。font-size-adjust 的值被指定為 cap-height 0.20。如果主字型不可用，回退字型調整後的字型大小將被計算為 16px（(0.20 / 0.15) * 12）。這將確保回退字型的 cap-height 與首選字型顯示時的高度相似。

正式定義

正式語法

font-size-adjust = 
  none                                                |
  [ ex-height | cap-height | ch-width | ic-width | ic-height ]? [ from-font | <number [0,∞]> ]  

示例

透過小寫和大寫字母規範化字型大小

這個例子演示瞭如何使用 font-size-adjust 屬性在不同字型間保持相同的縱橫比。Verdana 字型的縱橫比較高，為 0.545，這意味著其小寫字母相對於大寫字母較高。這使得文字在小字號下看起來很清晰。然而，Times 字型的縱橫比較低，為 0.447，因此文字在小字號下可讀性較差。如果 Verdana 是首選字型，而 Times 是回退字型，指定 font-size-adjust 屬性可以幫助在 Times 字型中保持相同的縱橫比。因此，如果字型回退到 Times，文字將保持與使用 Verdana 時相似的易讀性水平。

同樣，Verdana 的 cap-height 與字型大小的比率是 0.73，而 Times 是 0.66。當對 Times 應用 font-size-adjust 屬性以調整其大寫字母以匹配 Verdana 的比率時，Times 字型將以調整後的字型大小 ((0.73 / 0.66) * 14) 15.48px 顯示。

<p class="verdana">
  A: This text uses the Verdana font (14px), which has relatively large
  lowercase letters.
</p>
<p class="times">
  B: This text uses the Times font (14px), which is hard to read in small sizes.
</p>
<p class="times adj-times-ex-height">
  C: This text in 14px Times font is adjusted to the same aspect value as the
  Verdana font, so lowercase letters are normalized across the two fonts.
</p>
<p class="times adj-times-cap-height">
  D: This text in 14px Times font is adjusted to the same cap-height to font
  size ratio as the Verdana font, so uppercase letters are normalized across the
  two fonts.
</p>

.times {
  font-family: "Times", serif;
  font-size: 14px;
}

.verdana {
  font-family: "Verdana", sans-serif;
  font-size: 14px;
}

.adj-times-ex-height {
  font-size-adjust: 0.545;
}

.adj-times-cap-height {
  font-size-adjust: cap-height 0.73;
}

在 B 中沒有使用 font-size-adjust，從 Verdana 字型切換到 Times 字型可能會因其較低的縱橫比而導致易讀性明顯下降。在 C 中，請注意 font-size-adjust 屬性只指定了一個值，因此使用了預設的 <font-metric> 值 ex-height。D 顯示瞭如果調整其大寫字母高度，字型與 A 相比會是什麼樣子。

確定字型的縱橫比

對於給定的字型，可以使用兩個並排的 <span> 元素中的相同內容來確定該字型的縱橫比。如果兩個 span 中的內容使用相同的字型大小，當一個 span 中的 font-size-adjust 值對於給定的字型是準確的時，兩個 span 將會匹配。

在下面的示例中，有三對並排的 <span> 元素，每對都包含字母“b”。目標是調整每對中右側 <span> 的 font-size-adjust 屬性，直到兩個字母周圍的邊框對齊。得到的 font-size-adjust 值可以被認為是該字型的縱橫比。

從第一對中的 0.6 開始，在第二對中調整到 0.5，我們繼續調整 font-size-adjust 屬性值，直到第三對中“b”字母周圍的邊框完美對齊。在這個例子中，縱橫比被確定為 0.482。

<div>
  <p><span>b</span><span class="adjust1">b</span></p>
  0.6
</div>

<div>
  <p><span>b</span><span class="adjust2">b</span></p>
  0.5
</div>

<div>
  <p><span>b</span><span class="adjust3">b</span></p>
  0.482
</div>

body {
  display: flex;
}

div {
  text-align: center;
}

p {
  margin: 0 30px 10px 30px;
}

body {
  display: flex;
}

div {
  text-align: center;
}

p {
  font-family: "Futura", sans-serif;
  font-size: 50px;
}

span {
  border: solid 1px red;
}

.adjust1 {
  font-size-adjust: 0.6;
}

.adjust2 {
  font-size-adjust: 0.5;
}

.adjust3 {
  font-size-adjust: 0.482;
}

規範

瀏覽器相容性

另見

• font-size
• font-weight
• size-adjust @font-face 描述符
• SVG font-size-adjust 屬性
• 學習：基礎文字和字型樣式