font-stretch

在此页

句法
可访问性关注
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

font-stretch CSS descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the @font-face rule.

For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the font-stretch descriptor to explicitly specify the font face's stretch. The values for the CSS descriptor is same as that of its corresponding font property.

句法

/* Single 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;
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;
/* multiple values */
font-stretch: 75% 125%;
font-stretch: condensed ultra-condensed;;

font-weight property is described using any one of the values listed below.

值

normal
semi-condensed , condensed , extra-condensed , ultra-condensed
semi-expanded , expanded , extra-expanded , ultra-expanded
<percentage>: A <percentage> value between 50% and 200% (inclusive). Negative values are not allowed for this property.

In earlier versions of the font-stretch specification, the property accepts only the nine keyword values. CSS Fonts Level 4 extends the syntax to accept a <percentage> value as well. This enables variable fonts to offer something more like a continuum of character widths. For TrueType or OpenType variable fonts, the "wdth" variation is used to implement varying widths.

If the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face.

Keyword to numeric mapping

The table below shows the mapping between keyword values and numeric percentages:

Keyword	Percentage
`ultra-condensed`	50%
`extra-condensed`	62.5%
`condensed`	75%
`semi-condensed`	87.5%
`normal`	100%
`semi-expanded`	112.5%
`expanded`	125%
`extra-expanded`	150%
`ultra-expanded`	200%

变量字体

Most fonts have a particular width which corresponds to one of the keyterm values. However some fonts, called variable fonts, can support a range of stretching with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight. For this, percentage ranges are useful.

For TrueType or OpenType variable fonts, the "wdth" variation is used to implement varying glyph widths.

可访问性关注

People with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a low contrast color ratio .

形式定义

相关 at-rule	`@font-face`
初始值	`normal`
计算值	如指定

形式句法

<font-stretch-absolute>{1,2}where 
<font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>

范例

Setting a percentage range for font-stretch

The following find a local Open Sans font or import it, and allow using the font for normal, semi-condensed and semi-expanded states.

@font-face {
  font-family: "Open Sans";
  src: local("Open Sans") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-stretch: 87.5% 112.5%;
}

规范

规范	状态	注释
CSS Fonts Module Level 4 The definition of 'font-stretch' in that specification.	工作草案
CSS Fonts Module Level 3 The definition of 'font-stretch' in that specification.	候选推荐

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`font-stretch`	Chrome 完整支持 62	Edge 完整支持 17	Firefox 完整支持 62	IE 不支持 No	Opera 完整支持 49	Safari 完整支持 10.1	WebView Android 完整支持 62	Chrome Android 完整支持 62	Firefox Android 完整支持 62	Opera Android 完整支持 41	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0

图例

完整支持
不支持

另请参阅

元数据

最后修改： Jul 22, 2020

CSS
CSS 参考
CSS 字体
指南
1. OpenType font features guide
2. Variable fonts guide
At-Rules
1. @font-face
2. @font-feature-values
特性

在此页

句法

值