首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

字体拉伸 | font-stretch

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

代码语言:javascript
复制
/* 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-condensedcondensedextra-condensedultra-condensed指定字体面比正常更小,压缩到最小。semi-expandedexpandedextra-expandedultra-expanded指定字型超过正常大小,扩展到最大。

插值

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

形式语法

代码语言:javascript
复制
normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

HTML

代码语言:javascript
复制
<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

代码语言:javascript
复制
.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

扫码关注腾讯云开发者

领取腾讯云代金券