font-optical-sizing CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2020 browserübergreifend verfügbar.
Die font-optical-sizing CSS Eigenschaft legt fest, ob die Textrendering für das Betrachten in verschiedenen 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
/* 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
Diese Eigenschaft wird mit einem der folgenden Schlüsselwortwerte angegeben:
Beschreibung
Optisches Sizing ist standardmäßig für Schriftarten aktiviert, die eine optische Größenvariationsachse haben. Die optische Größenvariationsachse wird durch opsz in font-variation-settings dargestellt.
Wenn optisches Sizing verwendet wird, werden kleine Textgrößen oft mit dickeren Strichen und größeren Serifen gerendert, während größere Texte oft feiner 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
Optisches Sizing deaktivieren
<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>
@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 referenzierte Schriftart — die optisches Sizing beinhaltet und frei lizenziert ist — eignet sich gut für Tests. Sie können sie auf GitHub herunterladen.
Spezifikationen
| Spezifikation |
|---|
| CSS Fonts Module Level 4 # font-optical-sizing-def |