font-optical-sizing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

Die font-optical-sizing CSS Eigenschaft legt fest, ob die Textrendering zur Betrachtung in unterschiedlichen Größen optimiert wird.

Probieren Sie es aus

font-optical-sizing: auto;

font-optical-sizing: none;

<section id="default-example">
  <div id="example-element">
    <h2>Chapter 3</h2>
    <p>
      On this particular Thursday, something was moving quietly through the
      ionosphere many miles above the surface of the planet; several somethings
      in fact, several dozen huge yellow chunky slablike somethings, huge as
      office blocks, silent as birds.
    </p>
  </div>
</section>

@font-face {
  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
  font-family: Amstelvar;
  font-style: normal;
}

#example-element {
  font-family: Amstelvar, serif;
  text-align: left;
}

#example-element h2 {
  font-size: 36px;
}

#example-element p {
  font-size: 12px;
}

Syntax

css

/* keyword values */
font-optical-sizing: none;
font-optical-sizing: auto; /* default */

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

Werte

none: Der Browser wird die Form der Glyphen nicht für eine optimale Betrachtung ändern.
auto: Der Browser wird die Form der Glyphen für eine optimale Betrachtung ändern.

Optische Größenanpassung ist standardmäßig für Schriftarten aktiviert, die eine Achse für optische Größenvariation haben. Die Achse für optische Größenanpassung wird durch opsz in font-variation-settings dargestellt.

Wenn die optische Größenanpassung verwendet wird, werden kleine Textgrößen oft mit dickeren Strichen und größeren Serifen gerendert, während größere Texte oft zarter mit mehr Kontrast zwischen dickeren und dünneren Strichen gerendert werden.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	all elements and text. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

font-optical-sizing = 
  auto  |
  none

Beispiele

Deaktivierung der optischen Größenanpassung

html

<p class="optical-sizing">
  This paragraph is optically sized. This is the default across browsers.
</p>

<p class="no-optical-sizing">
  This paragraph is not optically sized. You should see a difference in
  supporting browsers.
</p>

css

@font-face {
  src: url("AmstelvarAlpha-VF.ttf");
  font-family: "Amstelvar";
  font-style: normal;
}

p {
  font-size: 36px;
  font-family: Amstelvar, serif;
}

.no-optical-sizing {
  font-optical-sizing: none;
}

Hinweis: Die oben erwähnte Schriftart — die optische Größenanpassung beinhaltet und frei lizenziert ist — eignet sich gut für Tests. Sie können sie auf GitHub herunterladen.

Spezifikationen

Specification
CSS Fonts Module Level 4 # font-optical-sizing-def