font-size-adjust

font-size-adjust 属性的值可以是关键字 none、一个（<number> 或 from-font）或两个（<font-metric> 和 <number> 或 from-font）值。

none

不会对回退字体的 font-size 值进行任何调整。

<font-metric> 可选

指定用于调整回退字体字体大小的首选字体度量。此参数接受下面列出的关键字之一。这是一个可选参数，如果未指定 <font-metric>，则使用 ex-height。

ex-height

使用 x 高度（字体中小写字母“x”的高度）与字体大小（纵横比值）的比率来调整回退字体大小。此关键字值用于跨字体规范化小写字母。

cap-height

使用大写字母高度（大写字母的高度）与字体大小的比率来调整回退字体大小。此关键字值用于跨字体规范化大写字母。

ch-width

使用字符“0”（零，U+0030）的字形宽度（字体中字符占据的水平空间）与字体大小的比率。此关键字值用于规范化字体的水平窄间距。

ic-width

使用字符“水”（CJK 水字，U+6C34）的字形宽度的比率与字体大小的比率。此关键字值用于规范化字体的水平宽间距，特别是包含 CJK（中文、日文、韩文）字符的字体。

ic-height

使用字符“水”（CJK 水字，U+6C34）的字形高度（字体中字符占据的垂直空间）与字体大小的比率。此关键字值用于规范化字体的垂直宽间距，特别是包含 CJK 字符的字体。

<number>

根据指定的 <font-metric> 调整使用的字体大小。当未指定 <font-metric>（在这种情况下使用默认值 ex-height）时，<number> 值会调整回退字体的字体大小，以便其 x 高度是字体大小的指定倍数。此值通常应与首选字体的纵横比值（x 高度与字体大小的比率）匹配。这意味着，无论浏览器是否支持 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是备用字体的新的调整后的字体大小。

考虑以下示例，了解如何计算调整后的字体大小。首选字体具有12px（s）的font-size，并且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在显示时与首选字体的cap-height相似。

font-size-adjust = 
  none            |
  <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。当将font-size-adjust属性应用于Times以调整其大写字母以匹配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 adjtimesexheight">
  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 adjtimescapheight">
  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;
}

.adjtimesexheight {
  font-size-adjust: 0.545;
}

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

在B中没有font-size-adjust的情况下，从Verdana字体切换到Times字体可能会导致可读性显着下降，因为它具有较低的纵横比值。在C中，请注意，仅为font-size-adjust属性指定了一个值，因此使用默认的<font-metric>值ex-height。D显示了如果调整其大写字母高度，字体与A相比的外观。

对于给定的字体，可以使用两个并排的<span>元素中的相同内容来确定字体的纵横比值。如果两个跨度中的内容使用相同的字体大小，则当其中一个跨度中的font-size-adjust值对于给定字体准确时，这两个跨度将匹配。

在下面的示例中，有三对并排的<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;
  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 描述符
• 学习：基本的文本和字体样式