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 Textdarstellung für die Ansicht in verschiedenen 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 Ansicht ändern.

auto

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

Beschreibung

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

Bei Verwendung von optischer Größenanpassung werden kleine Textgrößen oft mit dickeren Strichen und größeren Serifen gerendert, während größerer Text oft feiner gerendert wird, mit mehr Kontrast zwischen dickeren und dünneren Strichen.

Formale Definition

Anfangswertauto
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

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

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

Hinweis: Die oben erwähnte Schriftart — die optische Größenanpassung umfasst und frei lizenziert ist — eignet sich gut zum Testen. 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