CSS参考手册
字体 | Fonts
字体拉伸 | 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 |
字体 | Fonts相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。