font-stretch

**font-stretch** CSS 描述符允许作者在@font-face at-规则中指定的字体中指定普通、紧缩或扩展的字形。

对于特定的字体系列，作者可以下载与同一字体系列的不同样式相对应的各种字形，然后使用 font-stretch 描述符显式指定字形的伸展。CSS 描述符的值与其对应的字体属性的值相同。

语法

css
/* Single values */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* multiple values */
font-stretch: 75% 125%;
font-stretch: condensed ultra-condensed;

font-stretch 属性使用下面列出的值之一进行描述。

值

normal

指定普通字形。

semi-condensed、condensed、extra-condensed、ultra-condensed

指定比普通字形更紧缩的字形，其中 ultra-condensed 最紧缩。

semi-expanded、expanded、extra-expanded、ultra-expanded

指定比普通字形更扩展的字形，其中 ultra-expanded 最扩展。

<percentage>

介于 50% 和 200%（含）之间的<percentage> 值。此属性不允许负值。

在 font-stretch 规范的早期版本中，该属性仅接受九个关键字值。CSS 字体级别 4 将语法扩展到也接受 <percentage> 值。这使可变字体能够提供类似于字符宽度连续性的东西。对于 TrueType 或 OpenType 可变字体，使用“wdth”变体来实现不同的宽度。

如果字体不提供与给定值完全匹配的字形，则小于 100% 的值映射到更窄的字形，大于或等于 100% 的值映射到更宽的字形。

关键字到数字映射

下表显示了关键字值和数值百分比之间的映射

关键字 百分比
ultra-condensed 50%
extra-condensed 62.5%
condensed 75%
semi-condensed 87.5%
normal 100%
semi-expanded 112.5%
expanded 125%
extra-expanded 150%
ultra-expanded 200%

可变字体

大多数字体都有一个特定的宽度，对应于一个关键字值。但是，有些字体称为可变字体，可以支持更精细或更粗略的伸展范围，这可以使设计人员更精确地控制所选权重。为此，百分比范围很有用。

对于 TrueType 或 OpenType 可变字体，使用“wdth”变体来实现不同的字形宽度。

无障碍

患有阅读障碍和其他认知障碍的人可能难以阅读过于紧缩的字体，尤其是当字体具有低对比度颜色比率时。

正式定义

相关 at-规则@font-face
初始值normal
计算值如指定

正式语法

错误：找不到此项目的语法。

示例

为 font-stretch 设置百分比范围

以下查找本地 Open Sans 字体或导入它，并允许使用字体进行普通、半紧缩和半扩展状态。

css
@font-face {
  font-family: "Open Sans";
  src:
    local("Open Sans") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-stretch: 87.5% 112.5%;
}

规范

规范
CSS 字体模块级别 4
# font-prop-desc

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅