Свойство CSS `font-stretch`

Свойство font-stretch CSS выбирает обычное, узкое или широкое начертание шрифта.

Попробуйте

font-stretch: condensed;

font-stretch: expanded;

font-stretch: ultra-expanded;

font-stretch: 50%;

font-stretch: 100%;

font-stretch: 150%;

<section class="default-example" id="default-example">
  <p class="transition-all" id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

@font-face {
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-family: "League";
  font-style: normal;
  font-weight: normal;
}

section {
  font-size: 1.2em;
  font-family: "League", sans-serif;
}

Синтаксис

/* 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;

Значения

Для этого свойства указывается одно значение из следующего списка:

normal

Задает обычное начертание шрифта.

semi-condensed, condensed, extra-condensed, ultra-condensed

Задает более узкое, чем обычное, начертание шрифта; ultra-condensed — самое узкое.

semi-expanded, expanded, extra-expanded, ultra-expanded

Задает более широкое, чем обычное, начертание шрифта; ultra-expanded — самое широкое.

<percentage>

Значение <percentage> от 50% до 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-face {
  font-family: "Anek Malayalam";
  src: url("https://fonts.gstatic.com/s/anekmalayalam/v4/6qLUKZActRTs_mZAJUZWWkhke0nYa-f6__Azq3-gP1W7db9_.woff2")
    format("woff2");
}

body {
  font-family: system-ui;
}

table {
  border-collapse: collapse;
  width: 100%;
}

tbody th {
  text-align: right;
}

th,
td {
  padding: 0.25rem;
  font-weight: normal;
  text-align: center;
}

td {
  border: solid;
  border-width: 1px;
  font-size: 5rem;
}

.inconsolata {
  font-family: "Inconsolata", sans-serif;
}

.anek-malayalam {
  font-family: "Anek Malayalam", sans-serif;
}

td:nth-child(2) {
  font-stretch: 50%;
}
td:nth-child(3) {
  font-stretch: 62.5%;
}
td:nth-child(4) {
  font-stretch: 75%;
}
td:nth-child(5) {
  font-stretch: 87.5%;
}
td:nth-child(6) {
  font-stretch: 100%;
}
td:nth-child(7) {
  font-stretch: 112.5%;
}
td:nth-child(8) {
  font-stretch: 125%;
}
td:nth-child(9) {
  font-stretch: 150%;
}
td:nth-child(10) {
  font-stretch: 200%;
}

<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 class="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 class="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>

• Inconsolata — вариативный шрифт с непрерывным диапазоном ширины от 50% до 200%.
• Anek Malayalam — вариативный шрифт Google, поддерживающий ширину от 75% до 125%. При значениях за пределами этого диапазона выбирается ближайший подходящий шрифт.

Формальное определение

Формальный синтаксис

font-stretch = 
  <font-stretch-absolute>

<font-stretch-absolute> = 
  normal |
  ultra-condensed |
  extra-condensed |
  condensed |
  semi-condensed |
  semi-expanded |
  expanded |
  extra-expanded |
  ultra-expanded |
  <percentage>

Примеры

Настройка растяжения шрифта в процентах

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

@font-face {
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-family: "LeagueMonoVariable";
  font-style: normal;
}

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

.condensed {
  font-stretch: 50%;
}

.normal {
  font-stretch: 100%;
}

.expanded {
  font-stretch: 200%;
}

Спецификации

Совместимость с браузерами

См. также

• font-stretch дескриптор правила @font-face
• Современное свойство font-width, заменяющее font-stretch
• Свойство font-style
• Свойство font-weight
• Атрибут font-stretch в SVG
• Основы оформления текста и шрифтов
• Модуль шрифтов CSS