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 属性
• 学习：基础文本和字体样式