font-stretch
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.
font-stretch
CSS 属性可从字体中选择正常、压缩或扩展的字体外观。
尝试一下
语法
/* <font-stretch-css3> 关键字值 */
font-stretch: normal;
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
/* 百分比值 */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;
/* 全局值 */
font-stretch: inherit;
font-stretch: initial;
font-stretch: revert;
font-stretch: revert-layer;
font-stretch: unset;
该属性可指定为单个 <font-stretch-css3>
关键字值或单个 <percentage>
值。
值
normal
-
指定为普通字体外观。
semi-condensed
、condensed
、extra-condensed
和ultra-condensed
-
指定比普通字体更紧凑的字体,其中
ultra-condensed
为最紧凑的字体。 semi-expanded
、expanded
、extra-expanded
和ultra-expanded
-
指定比普通字体更扩展的字体,其中
ultra-expanded
为扩展程度最大的字体。 <percentage>
-
介于 50% 和 200% 之间的
<percentage>
值(包含两侧)。此属性不允许使用负值。
关键字到数值的映射
下表显示了 <font-stretch-css3>
关键字值与百分比数值之间的映射关系:
关键字 | 百分比 |
---|---|
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% |
描述
某些字体系列提供了额外的字体外观,其中的字符比正常字体窄(紧凑外观)或比正常字体宽(扩展外观)。
可以使用 font-stretch
从此类字体中选择紧凑或扩展字体。如果你使用的字体不提供紧凑或扩展字面,则此属性无效。
字体外观选择
为给定的 font-stretch
值选择的外观取决于相关字体支持的外观。如果字体不提供与给定值完全匹配的外观,那么小于 100% 的值会映射到较窄的外观,大于或等于 100% 的值会映射到较宽的外观。
下表展示了提供不同百分比的 font-stretch
值对两种不同字体的影响:
- Anek Malayalam 是一种可变的 google 字体,支持 75% 到 125% 的宽度。低于或高于此范围的值会选择最匹配的字体。
- Inconsolata 是一种可变字体,提供从 50% 到 200% 的连续宽度范围。
形式定义
初始值 | normal |
---|---|
适用元素 | 所有元素和文本. It also applies to ::first-letter and ::first-line . |
是否是继承属性 | 是 |
计算值 | as specified |
动画类型 | a font stretch |
形式语法
Error: could not find syntax for this item
示例
设置字体伸缩百分比
规范
Specification |
---|
CSS Fonts Module Level 4 # font-stretch-prop |
备注: font-stretch
属性最初是在 CSS 2 中定义的,但在 CSS 2.1 中由于缺乏浏览器实现而被取消。在 CSS 3 中,该属性被重新定义。
浏览器兼容性
BCD tables only load in the browser