font-width

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Hinweis: Die font-width-Eigenschaft ist der moderne Ersatz für font-stretch, das ein veraltetes Alias ist. Während font-width der bevorzugte Name in der Spezifikation ist, hat font-stretch derzeit eine breitere Browser-Unterstützung. Überprüfen Sie das Fallback-Beispiel und die Browser-Kompatibilität-Tabelle für Details.

Die font-width CSS Eigenschaft wählt eine normale, komprimierte oder erweiterte Schriftart aus einem Font aus.

Probieren Sie es aus

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;
}

Syntax

css

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

Diese Eigenschaft kann als einzelnes Schlüsselwort oder als <percentage> Wert angegeben werden.

Werte

normal: Gibt eine normalerweise komprimierte Schriftart an.
semi-condensed, condensed, extra-condensed, ultra-condensed: Gibt eine stärker komprimierte Schriftart als normal an, wobei ultra-condensed die am stärksten komprimierte ist.
semi-expanded, expanded, extra-expanded, ultra-expanded: Gibt eine mehr erweiterte Schriftart als normal an, wobei ultra-expanded die am stärksten erweiterte ist.
<percentage>: Ein <percentage> Wert zwischen 50% und 200% (einschließlich). Negative Werte sind für diese Eigenschaft nicht zulässig.

Zuordnung von Schlüsselwort zu numerischen Werten

Die Tabelle unten zeigt die Zuordnung zwischen den Schlüsselwortwerten und numerischen Prozentsätzen:

Schlüsselwort	Prozentsatz
`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%

Beschreibung

Einige Schriftarten bieten zusätzliche Schnitte, bei denen die Zeichen schmaler als die normale Schriftart (komprimierte Schnitte) oder breiter als die normale Schriftart (erweiterte Schnitte) sind.

Sie können font-width verwenden, um eine komprimierte oder erweiterte Schrift aus solchen Fonts auszuwählen. Wenn der von Ihnen verwendete Font keine komprimierten oder erweiterten Schnitte anbietet, hat diese Eigenschaft keine Wirkung.

Auswahl der Schriftschnitte

Der für einen gegebenen Wert von font-width ausgewählte Schnitt hängt von den unterstützten Schnitten des jeweiligen Fonts ab. Wenn der Font keinen Schnitt bietet, der genau dem angegebenen Wert entspricht, dann ordnen Werte unter 100% einem komprimierten Schnitt zu, und Werte gleich oder über 100% einem erweiterten Schnitt.

Die untenstehende Tabelle zeigt die Wirkung der Einstellung verschiedener Prozentwerte von font-width auf zwei verschiedene Schriftarten:

@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>

Der folgende Screenshot zeigt, wie die obige Tabelle dargestellt wird, falls Ihr Browser die font-width Eigenschaft nicht unterstützt:

Eine Vergleichstabelle mit zwei Zeilen, die den Kleinbuchstaben e in verschiedenen Breiten (50%, 62.5%, 75%, 87.5%, 100%, 112.5%, 125%, 150%, 200%) zeigt. Die obere Reihe ist mit Inconsolata und die untere mit Anek Malayalam beschriftet. Beide Schriftarten sind serifenlos und die Buchstaben von Inconsolata sind im Vergleich zu den Buchstaben von Anek Malayalam etwas breiter.

Inconsolata ist eine variable Schriftart, die einen kontinuierlichen Bereich von Breiten von 50% bis 200% bietet.
Anek Malayalam ist eine variable Google-Schriftart, die Breiten von 75% bis 125% unterstützt. Werte unter und über diesem Bereich wählen die am nächsten kommende passende Schrift.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	all elements and text. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Berechneter Wert	percentage
Animationstyp	by computed value type

Formale Syntax

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

Beispiele

Einstellen von Schriftbreitenprozentwerten

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("/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%;
}

Einen Fallback für font-stretch bereitstellen

Da font-width noch keine breite Browser-Unterstützung hat, möchten Sie vielleicht die veraltete font-stretch-Eigenschaft als Fallback einschließen. Platzieren Sie font-stretch vor font-width, damit unterstützende Browser die moderne Eigenschaft verwenden:

css

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

Hinweis: Sie können dieses Fallback-Muster automatisieren, indem Sie das postcss-preset-env Plugin für PostCSS verwenden, das die postcss-font-width-property Transformation zur automatischen Umwandlung von font-width in font-stretch beinhaltet.

Spezifikationen

Specification
CSS Fonts Module Level 4 # propdef-font-width

Browser-Kompatibilität

Siehe auch

font-width Deskriptor für @font-face
Veraltete font-stretch Alias Eigenschaft mit besserer Browser-Unterstützung
font-style Eigenschaft
font-weight Eigenschaft
SVG font-stretch Attribut
Lernen: Grundlegendes Text- und Schriftstyling
CSS Schriften Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden