font-optical-sizing

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

/* 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;

<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 optische Größenanpassung beinhaltet und frei lizenziert ist – eignet sich gut zum Testen. Sie können sie auf GitHub herunterladen.

Help improve MDN