Vereinfachte Fluid-Typografie

0
7

Flüssigkeit Typografie ist die Idee, die Schriftgröße (und vielleicht auch andere Attribute des Typs, wie line-height) ändern sich je nach Bildschirm-Größe (oder vielleicht container Abfragen, wenn wir Sie hatten).

Der Kern Tricks kommt von viewport-Einheiten. Sie können buchstäblich setzen Sie geben Sie in viewport-Einheiten (z.B. schriftart,-Größe: 4vw), aber die Schwankungen in der Größe sind so extrem, dass es in der Regel unerwünscht. Das ist Manipulation von etwas wie font-size: calc(16px + 1vw). Aber während wir sind immer Phantasie mit Berechnungen sowieso, die gemeinsame Umsetzung wurde eine Gleichung zur Berechnung Klartext:

Ich möchte die Art zu gehen zwischen sein 16px auf eine 320px-Bildschirm zu 22px auf 1000px-Bildschirm.

Die endete wie folgt:

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

Das ist im wesentlichen die Einstellung einer minimalen und maximalen Schriftgröße so der Typ nicht schrumpfen oder wachsen, um etwas zu extrem. “CSS-sperren” war ein Begriff geprägt von Tim Brown.

Minimum und maximum sagen Sie?! Nun, es ist so passiert, dass Funktionen für diese haben Ihren Weg in die CSS-Spezifikation, die in form von min() und max().

So können wir vereinfachen unsere Phantasie setup oben mit einem one-liner und Aufrechterhaltung der sperren:

html – {
font-size: min(max(16px, 4vw), 22px);
}

Wir eigentlich wollen, es zu stoppen, denn obwohl sowohl Safari (11.1+) und Chrom (79+) unterstützen diese auf den gegenwärtigen moment, das ist so breit wie die Unterstützung bekommen, die heute. Apropos, würden Sie wahrscheinlich wollen zu rutschen font-size Erklärung, bevor Sie diese Option, um eine akzeptable fallback-Wert mit keine ausgefallenen Funktionen.

Aber solange wir das sind die Grenzen, gibt es eine weitere Funktion zur Vereinfachung der Dinge noch mehr: Klemme()! Clamp drei Werte, min, max, und eine flexible Einheit (oder Berechnung oder was auch immer) in der Mitte, dass es in diesem Fall der Wert zwischen den min und max. So, unsere one-liner geht noch kleiner:

body {
font-size: Klemme(16px, 4vw, 22px);
}

Das wird Chrom-79+ (, die nicht, noch nicht einmal gesunken ist stabil, aber sehr bald).

Onkel Dave freut sich sehr, dass FitText ist jetzt ein paar bytes anstelle von alles-mit-jQuery-plus 40 weitere Zeilen. Hier ist uns einspannen CSS custom properties auf Sie:

Siehe Stift
FitText in CSS mit Klemme() von Dave Rupert (@davatron5000)
auf CodePen.