Summary
font-stretch
属性为字体定义一个正常或经过伸缩变形的字体外观,这个属性并不会通过伸展/缩小而改变字体的几何外形,如font-feature-settings
和font-variant
属性,它仅仅意味着当有多种字体可供选择时,会为字体选择最适合的大小。
Note: If the font provides several faces, the one fitting the best with the value of the font-stretch
property is chosen. E.g. On OS X, in addition to the more common Bold, Regular, Italic, and BoldItalic faces, the "Helvetica Neue" font proposes a second set of faces with condensed, that is shrunk, characters: Condensed. Browsers supporting font-stretch
will use the condensed faces for the value ultra-condensed
to semi-condensed
and the normal faces for the other (normal
and all expanded values).

If the font has no condensed or expanded faces, like the default "Times New Roman" on Mac OS, font-stretch
will not have any visible effect as the only suitable face will be used in all cases.:
初始值 | 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 |
Syntax
/* 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;
Values
normal
- 指定默认字体
semi-condensed
,condensed
,extra-condensed
,ultra-condensed
- 小于默认字体,其中ultra-condensed是缩的最小的字体
semi-expanded
,expanded
,extra-expanded
,ultra-expanded
- 大于默认字体的值
Interpolation
Font stretch values are interpolated in discrete steps. The interpolation happens as though the ordered values are equally spaced real numbers; the result is rounded to the nearest value, with values exactly halfway between two values rounded towards the later value, that is the most expanded one.
Formal syntax
<font-stretch-absolute>where
<font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>
Example
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;}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 font-stretch |
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 | 未实现 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 未实现 | (Yes) | 9.0 (9.0) | ? | 未实现 | 未实现 |