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 CSS-Eigenschaft font-optical-sizing legt fest, ob die Textdarstellung für die Anzeige bei 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.woff2");
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 als einer der folgenden Schlüsselwortwerte angegeben:
Beschreibung
Die optische Größenanpassung ist standardmäßig für Schriftarten aktiviert, die eine Variationsachse für die optische Größe haben. Die Variationsachse für die optische Größe wird in font-variation-settings durch opsz dargestellt.
Wenn die optische Größenanpassung verwendet wird, werden kleine Textgrößen häufig mit stärkeren Strichen und größeren Serifen dargestellt, während größere Texte häufig feiner mit stärkerem Kontrast zwischen dickeren und dünneren Strichen dargestellt 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
Optische Größenanpassung 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.woff2");
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 optische Größenanpassung enthält und frei lizenziert ist – eignet sich gut zum Testen. Sie können sie auf GitHub herunterladen.
Spezifikationen
| Spezifikation |
|---|
| CSS Fonts Module Level 4 # font-optical-sizing-def |