font-stretch

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

font-stretch CSS 属性可从字体中选择正常、压缩或扩展的字体外观。

尝试一下

语法

css
/* <font-stretch-css3> 关键字值 */
font-stretch: normal;
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* 百分比值 */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* 全局值 */
font-stretch: inherit;
font-stretch: initial;
font-stretch: revert;
font-stretch: revert-layer;
font-stretch: unset;

该属性可指定为单个 <font-stretch-css3> 关键字值或单个 <percentage> 值。

normal

指定为普通字体外观。

semi-condensedcondensedextra-condensedultra-condensed

指定比普通字体更紧凑的字体,其中 ultra-condensed 为最紧凑的字体。

semi-expandedexpandedextra-expandedultra-expanded

指定比普通字体更扩展的字体,其中 ultra-expanded 为扩展程度最大的字体。

<percentage>

介于 50% 和 200% 之间的 <percentage> 值(包含两侧)。此属性不允许使用负值。

关键字到数值的映射

下表显示了 <font-stretch-css3> 关键字值与百分比数值之间的映射关系:

关键字 百分比
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%

描述

某些字体系列提供了额外的字体外观,其中的字符比正常字体窄(紧凑外观)或比正常字体宽(扩展外观)。

可以使用 font-stretch 从此类字体中选择紧凑或扩展字体。如果你使用的字体不提供紧凑或扩展字面,则此属性无效。

字体外观选择

为给定的 font-stretch 值选择的外观取决于相关字体支持的外观。如果字体不提供与给定值完全匹配的外观,那么小于 100% 的值会映射到较窄的外观,大于或等于 100% 的值会映射到较宽的外观。

下表展示了提供不同百分比的 font-stretch 值对两种不同字体的影响:

  • Anek Malayalam 是一种可变的 google 字体,支持 75% 到 125% 的宽度。低于或高于此范围的值会选择最匹配的字体。
  • Inconsolata 是一种可变字体,提供从 50% 到 200% 的连续宽度范围。

形式定义

初始值normal
适用元素所有元素和文本. It also applies to ::first-letter and ::first-line.
是否是继承属性
计算值as specified
动画类型a font stretch

形式语法

Error: could not find syntax for this item

示例

设置字体伸缩百分比

规范

Specification
CSS Fonts Module Level 4
# font-stretch-prop

备注: font-stretch 属性最初是在 CSS 2 中定义的,但在 CSS 2.1 中由于缺乏浏览器实现而被取消。在 CSS 3 中,该属性被重新定义。

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-stretch
<percentage> syntax

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

参见