字体拉伸 | font-stretch
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 |
|---|---|
| 应用于 | all elements. It also applies to ::first-letter and ::first-line. |
| 继承 | yes |
| 媒体 | visual |
| 计算值 | as specified |
| Animation type | a font stretch |
| 规范顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
取值
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;}
结果
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Fonts Module Level 3The definition of 'font-stretch' in that specification. | Candidate Recommendation | Initial definition |
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
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 48.0 | (Yes) | 9.0 (9.0) | 9.0 | 35.0 | No support |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | No support | (Yes) | 9.0 (9.0) | ? | No support | No support |
