字体拉伸 | font-stretch

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

/* Keyword 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;

/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;

该属性不会通过伸缩缩小任意字体的几何形状。像font-feature-settings或者font-variant。如果它提供了其中的几个，这仅仅是一种选择最合适的字体的方式, 。

注意：如果字体提供了多个面，font-stretch则选择与该属性值最匹配的那个面。例如，在OS X上，除了更为常见的Bold，Regular，Italic和BoldItalic外，“Helvetica Neue”字体还提供了第二组缩放的缩略字体：缩写。浏览器支持font-stretch将使用压缩的值ultra-condensed，以semi-condensed及用于其它正常表面（normal和所有展开的值）。

如果字体没有浓缩或扩展，如Mac OS上的默认“Times New Roman”，font-stretch则不会有任何可见的效果，因为在所有情况下都将使用唯一合适的。

语法

取值

normal指定一个正常的字体。semi-condensed，condensed，extra-condensed，ultra-condensed指定字体面比正常更小，压缩到最小。semi-expanded，expanded，extra-expanded，ultra-expanded指定字型超过正常大小，扩展到最大。

插值

字体拉伸值以不连续的步骤插值。插值的发生就像有序值是等间隔的实数一样; 结果四舍五入到最接近的值，两个值之间的值恰好在后面的值四舍五入，这是最扩展的值。

形式语法

normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

例

HTML

<div class="ultra stretch"> This is text with the font extremely expanded</div>
<div class="stretch"> This is text with the font stretched</div>
<div class="normal"> This is text without font stretching</div>
<div class="condensed"> This is text with the font condensed</div>
<div class="ultra condensed"> This is text with the font extremely condensed</div>

CSS

.ultra.stretch{font-stretch: ultra-expanded;}
.stretch {font-stretch: expanded;} 
.normal {font-stretch: normal;}
.condensed {font-stretch: condensed;}
.ultra.condensed {font-stretch: ultra-condensed;}

结果

规范

The CSS property font-stretch was initially defined in CSS 2, but dropped in CSS 2.1 due to lack of implementation experience. It has been newly defined in CSS 3.

Browser compatibility