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 Textrenderung 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
Beschreibung
Optisches Sizing ist standardmäßig für Schriftarten aktiviert, die eine Achse für optische Größenvariation haben. Die Achse für optische Größenvariation 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 meist zarter mit mehr 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
Deaktivieren des optischen Sizing
<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 umfasst 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 |