Wie macht man max-font-size in CSS?

CSS hat keine max-font-size, daher müssen wir trickreich vorgehen, wenn wir etwas Ähnliches brauchen.

Warum sollte man es überhaupt brauchen? Nun, font-size selbst kann auf dynamische Weise eingestellt werden. Zum Beispiel: font-size: 10vw;. Das ist die Verwendung von „Viewport-Einheiten“ zur Größenbestimmung des Textes, der mit der Größe des Browserfensters größer und kleiner wird. Wenn wir max-font-size hätten, könnten wir begrenzen, wie groß er wird (ähnlich in die andere Richtung mit min-font-size).

Eine Lösung besteht darin, bei einer bestimmten Bildschirmgröße einen Media Query zu verwenden, der die Schriftgröße in einer nicht-relativen Einheit festlegt.

body {
  font-size: 3vw;
}
@media screen and (min-width: 1600px) {
  body {
     font-size: 30px;
  }
}

Es gibt ein Konzept, das als CSS-Locks bezeichnet wird und hier ausgefeilter ist, indem ein Wert langsam zwischen einem Minimum und einem Maximum skaliert wird. Wir haben das behandelt. Es kann so sein...

body {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  body {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  body {
    font-size: 22px;
  }
}

Wir haben auch behandelt, wie es einfacher geworden ist (oder werden wird).

Es gibt eine max()-Funktion in CSS, sodass unser obiges Beispiel zu einer Einzeiler-Lösung wird

font-size: max(30vw, 30px);

Oder verdoppeln Sie es mit einem Minimum und Maximum

font-size: min(max(16px, 4vw), 22px);

Was identisch ist mit

font-size: clamp(16px, 4vw, 22px);

Die Browserkompatibilität für diese Funktionen ist ziemlich spärlich, während ich das schreibe, aber Chrome hat sie derzeit. Es wird schon noch kommen, aber schauen Sie sich die erste Option in diesem Artikel an, wenn Sie sie sofort benötigen.

Jetzt, da wir diese Funktionen haben, erscheint es mir unwahrscheinlich, dass wir jemals min-font-size und max-font-size in CSS erhalten werden, da die Funktionen fast so klar sind, wie sie sind.