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 für die Darstellung in unterschiedlichen Größen optimiert wird.

Probieren Sie es aus

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 Darstellung ändern.

auto

Der Browser wird die Form der Glyphen für eine optimale Darstellung ändern.

Beschreibung

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

Wenn optische Anpassung verwendet wird, werden kleine Texthöhen häufig mit dickeren Strichen und größeren Serifen gerendert, während größere Texte oft zarter mit mehr Kontrast zwischen dickeren und dünneren Strichen dargestellt werden.

Formale Definition

Initialer Wertauto
Anwendbar aufall elements and text. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

font-optical-sizing = 
  auto  |
  none

Beispiele

Optische Anpassung deaktivieren

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

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

Hinweis: Die oben referenzierte Schriftart — die optische Anpassung umfasst 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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch