`font-size` Mit Allen Viewport Einheiten

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Wir haben sichbare Typografie schon mehrmals behandelt. Diese Seite behandelt es wahrscheinlich im besten Detail. Es ist etwas komplizierter als die einfache Verwendung einer vw-Einheit für die font-size, da dies viel zu dramatisch ist. Idealerweise ist die font-size buchstäblich fließend zwischen minimalen und maximalen Werten.

Eines Tages wird es (wahrscheinlich) min-font-size und max-font-size geben, aber bis dahin müssen unsere Implementierungen für sichbare Typografie wahrscheinlich einige @media-Abfragen verwenden, um diese Min/Max-Werte zu sperren.

Oder…

Vor etwa einem Jahr dokumentierte Matt Smith eine Technik, die ich verpasst hatte. Sie berechnet die Schriftgröße mit einem kleinen Anteil vw, einem kleinen Anteil vh und einem kleinen Anteil des kleineren der beiden...

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

Natürlich hängt es von der Schriftart und dem ab, was Sie damit machen, aber mir scheint, dass dies die Kurve so temperiert, dass Sie möglicherweise keinen Minimal- und Maximalwert mehr benötigen.

Direkter Link →