font-stretch

注意: font-stretch 属性现在在规范中已更名为 font-width。名称 font-stretch 作为 font-width 属性的别名保留。新名称 font-width 目前还没有被任何浏览器支持。

font-stretch CSS 属性从字体中选择普通、紧缩或扩展字形。

试一试

语法

css

/* <font-stretch-css3> keyword values */
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;

/* Percentage values */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: revert;
font-stretch: revert-layer;
font-stretch: unset;

此属性可以指定为单个 <font-stretch-css3> 关键字值或单个 <percentage> 值。

Values

normal: 指定普通字形。
semi-condensed, condensed, extra-condensed, ultra-condensed: 指定比普通字形更紧缩的字形，其中 ultra-condensed 最紧缩。
semi-expanded, expanded, extra-expanded, ultra-expanded: 指定比普通字形更扩展的字形，其中 ultra-expanded 最扩展。
<percentage>: 介于 50% 和 200%（含）之间的 <percentage> 值。此属性不允许使用负值。

Keyword to numeric mapping

下表显示了 <font-stretch-css3> 关键字值与数值百分比之间的映射关系。

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%

描述

一些字体系列提供了额外的字形，其中字符比普通字形更窄（紧缩字形）或更宽（扩展字形）。

可以使用 font-stretch 从此类字体中选择紧缩或扩展字形。如果您使用的字体没有提供紧缩或扩展字形，则此属性将不起作用。

Font face selection

对于给定的 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 是一款支持 75% 到 125% 宽度范围的可变谷歌字体。低于和高于此范围的值将选择最接近匹配的字体。
Inconsolata 是一款可变字体，提供 50% 到 200% 的连续宽度范围。

正式定义

初始值	`normal`
适用于	所有元素和文本。它也适用于 `::first-letter` 和 `::first-line`。
继承	是
计算值	如指定
动画类型	一个字体伸缩

正式语法

font-width = 
  normal              |
  <percentage [0,∞]>  |
  ultra-condensed     |
  extra-condensed     |
  condensed           |
  semi-condensed      |
  semi-expanded       |
  expanded            |
  extra-expanded      |
  ultra-expanded

示例

设置字体伸缩百分比

html

<p class="condensed">an elephantine lizard</p>
<p class="normal">an elephantine lizard</p>
<p class="expanded">an elephantine lizard</p>

css

@font-face {
  src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
  font-family: "LeagueMonoVariable";
  font-style: normal;
  font-stretch: 1% 500%; /* Required by Chrome */
}

p {
  font:
    1.5rem "LeagueMonoVariable",
    sans-serif;
}

.condensed {
  font-stretch: 50%;
}

.normal {
  font-stretch: 100%;
}

.expanded {
  font-stretch: 200%;
}

规范

规范
CSS Fonts 模块 Level 4 # font-stretch-prop

浏览器兼容性

BCD 表格仅在浏览器中加载