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

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

Попробуйте

font-width: condensed;

font-width: expanded;

font-width: ultra-expanded;

font-width: 50%;

font-width: 100%;

font-width: 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-width: normal;
font-width: ultra-condensed;
font-width: extra-condensed;
font-width: condensed;
font-width: semi-condensed;
font-width: semi-expanded;
font-width: expanded;
font-width: extra-expanded;
font-width: ultra-expanded;

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

/* Global values */
font-width: inherit;
font-width: initial;
font-width: revert;
font-width: revert-layer;
font-width: 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-width можно выбрать узкое или широкое начертание таких шрифтов. Если используемый шрифт не имеет узких или широких начертаний, это свойство не оказывает никакого эффекта.

Выбор начертания шрифта

Выбор начертания для заданного значения font-width зависит от начертаний, поддерживаемых соответствующим шрифтом. Если шрифт не предоставляет начертание, точно соответствующее заданному значению, значения меньше 100% выбирают узкое начертание, а значения, равные или превышающие 100%, — широкое.

В таблице ниже показан эффект задания различных процентных значений font-width для двух разных шрифтов:

@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-width: 50%;
}
td:nth-child(3) {
  font-width: 62.5%;
}
td:nth-child(4) {
  font-width: 75%;
}
td:nth-child(5) {
  font-width: 87.5%;
}
td:nth-child(6) {
  font-width: 100%;
}
td:nth-child(7) {
  font-width: 112.5%;
}
td:nth-child(8) {
  font-width: 125%;
}
td:nth-child(9) {
  font-width: 150%;
}
td:nth-child(10) {
  font-width: 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>

На следующем снимке экрана показано, как отображается приведённая выше таблица, если ваш браузер не поддерживает свойство font-width:

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

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

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

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

Примеры

Задание ширины шрифта в процентах

<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-width: 50%;
}

.normal {
  font-width: 100%;
}

.expanded {
  font-width: 200%;
}

Добавление резервного варианта font-stretch

Поскольку font-width пока не поддерживается широким кругом браузеров, в качестве резервного варианта можно добавить устаревшее свойство font-stretch. Разместите font-stretch перед font-width, чтобы браузеры с поддержкой использовали современное свойство:

p {
  font-stretch: condensed; /* for browsers that don't support font-width */
  font-width: condensed;
}

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

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

См. также

• font-width — дескриптор для @font-face
• Устаревшее свойство-псевдоним font-stretch, поддерживаемое большим числом браузеров
• font-style — свойство
• font-weight — свойство
• Атрибут SVG font-width
• Атрибут SVG font-stretch
• Изучение: основы оформления текста и шрифтов
• Шрифты CSS — модуль