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 属性可从字体中选择正常、压缩或扩展的字体外观。

尝试一下

语法

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 值对两种不同字体的影响：

@font-face {
  font-family: "Inconsolata";
  src: url("https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2")
    format("woff2");
  font-stretch: 50% 200%;
}

@font-face {
  font-family: "Anek Malayalam";
  src: url("https://fonts.gstatic.com/s/anekmalayalam/v4/6qLUKZActRTs_mZAJUZWWkhke0nYa-f6__Azq3-gP1W7db9_.woff2")
    format("woff2");
  font-stretch: 75% 125%;
}

td {
  border: solid;
  border-width: 1px;
}

#inconsolata td {
  font:
    90px Inconsolata,
    sans-serif;
}
#anek-malayalam td {
  font: 90px "Anek Malayalam";
}
#inconsolata td:nth-child(2),
#anek-malayalam td:nth-child(2) {
  font-stretch: 50%;
}
#inconsolata td:nth-child(3),
#anek-malayalam td:nth-child(3) {
  font-stretch: 62.5%;
}
#inconsolata td:nth-child(4),
#anek-malayalam td:nth-child(4) {
  font-stretch: 75%;
}
#inconsolata td:nth-child(5),
#anek-malayalam td:nth-child(5) {
  font-stretch: 87.5%;
}
#inconsolata td:nth-child(6),
#anek-malayalam td:nth-child(6) {
  font-stretch: 100%;
}
#inconsolata td:nth-child(7),
#anek-malayalam td:nth-child(7) {
  font-stretch: 112.5%;
}
#inconsolata td:nth-child(8),
#anek-malayalam td:nth-child(8) {
  font-stretch: 125%;
}
#inconsolata td:nth-child(9),
#anek-malayalam td:nth-child(9) {
  font-stretch: 150%;
}
#inconsolata td:nth-child(10),
#anek-malayalam td:nth-child(10) {
  font-stretch: 200%;
}

<table class="standard-table">
  <thead>
    <tr>
      <th scope="row"></th>
      <th scope="col">50%</th>
      <th scope="col">62.5%</th>
      <th scope="col">75%</th>
      <th scope="col">87.5%</th>
      <th scope="col">100%</th>
      <th scope="col">112.5%</th>
      <th scope="col">125%</th>
      <th scope="col">150%</th>
      <th scope="col">200%</th>
    </tr>
  </thead>
  <tbody>
    <tr id="inconsolata">
      <th scope="row">Inconsolata</th>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
    </tr>
    <tr id="anek-malayalam">
      <th scope="row">Anek Malayalam</th>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
    </tr>
  </tbody>
</table>

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

浏览器兼容性

BCD tables only load in the browser