Wie implementiere ich die maximale Schriftgröße?

78

Ich möchte meine Schriftgröße vwwie in angeben

font-size: 3vw;

Ich möchte jedoch auch die Schriftgröße auf 36px beschränken. Wie kann ich das Äquivalent von erreichen max-font-size, das nicht existiert - ist die einzige Option, um Medienabfragen zu verwenden?

Danield
quelle

Antworten:

150

font-size: 3vw;bedeutet, dass die Schriftgröße 3% der Breite des Ansichtsfensters beträgt. Wenn die Breite des Ansichtsfensters 1200 Pixel beträgt, beträgt die Schriftgröße 3% * 1200 Pixel = 36 Pixel.

So kann eine maximale Schriftgröße von 36px einfach mithilfe einer einzelnen Medienabfrage implementiert werden, um den Standardwert für die 3vw-Schriftgröße zu überschreiben.

Codepen-Demo (Browsergröße ändern)

div {
  font-size: 3vw;
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}
<div>hello</div>

Update: Mit der neuen CSS min () Funktion können wir den obigen Code vereinfachen - ohne Medienabfragen zu verwenden ( caniuse )

div {
  font-size: min(3vw, 36px);
}

Im obigen Beispiel beträgt die Schriftgröße höchstens 36 Pixel, verringert sich jedoch auf 3 VW, wenn das Ansichtsfenster weniger als 1200 Pixel breit ist (wobei 3 VW einen Wert von weniger als 36 Pixel berechnet).


Die Verwendung von Ansichtsfenstereinheiten für font-sizedie oben beschriebene Weise ist jedoch problematisch, da bei einer viel kleineren Ansichtsfensterbreite (z. B. 320 Pixel) die gerenderte Schriftgröße 0,03 x 320 = 9,6 Pixel beträgt, was sehr (zu) klein ist.

Um dieses Problem zu lösen, kann ich die Verwendung einer Technik namens Fluid Type AKA CSS Locks empfehlen .

Eine CSS-Sperre ist eine bestimmte Art der CSS-Wertberechnung, bei der:

  • es gibt einen minimalen Wert und einen maximalen Wert,
  • und zwei Haltepunkte (normalerweise basierend auf der Breite des Ansichtsfensters),
  • und zwischen diesen Haltepunkten geht der tatsächliche Wert linear vom Minimum zum Maximum.

Nehmen wir also an, wir möchten die obige Technik so anwenden, dass die minimale Schriftgröße 16 Pixel bei einer Ansichtsfensterbreite von 600 Pixel oder weniger beträgt und linear zunimmt, bis sie bei einer Ansichtsfensterbreite von 1200 Pixel ein Maximum von 32 Pixel erreicht.

Dies kann wie folgt dargestellt werden ( weitere Informationen finden Sie in diesem CSS-Trick-Artikel ):

div {
  font-size: 16px;
}
@media screen and (min-width: 600px) {
  div {
    font-size: calc(16px + 16 * ((100vw - 600px) / 600));
  }
}
@media screen and (min-width: 1200px) {
  div {
    font-size: 32px;
  }
}

Alternativ könnten wir dieses SASS-Mixin verwenden, das die gesamte Mathematik für uns erledigt, damit das CSS ungefähr so ​​aussieht:

/* 
     1) Set a min-font-size of 16px when viewport width < 600px
     2) Set a max-font-size of 32px when viewport width > 1200px and
     3) linearly increase the font-size from 16->32px 
     between a viewport width of 600px-> 1200px 
*/

div {
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}

Codepen Demo


Update: Wir können die neue CSS-Funktion clamp () ( caniuse ) verwenden, um den obigen Code einfach umzugestalten :

div {
  font-size: clamp(16px, 3vw, 32px);
}

siehe MDN :

Mit clamp () können Sie eine Schriftgröße festlegen, die mit der Größe des Ansichtsfensters wächst, jedoch nicht unter eine minimale Schriftgröße oder über eine maximale Schriftgröße fällt. Es hat den gleichen Effekt wie der Code in Fluid Typography, jedoch in einer Zeile und ohne Verwendung von Medienabfragen.

p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
<p>
If 2.5vw is less than 1rem, the font-size will be 1rem.
If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
Otherwise, it will be 2.5vw.
</p>

- -


Weiterführende Literatur

Flüssigkeitstypographie

Wie macht man die maximale Schriftgröße in CSS?

Fluid Responsive Typography mit CSS Poly Fluid Sizing

Nichtlineare Interpolation in CSS

Danield
quelle
1
@ Danield Danke für diese tolle Antwort. Ich habe viel daraus gelernt. Ich frage mich, warum Sie die zusätzlichen @mediaAbfragen für max-und hinzufügen müssen min-width. Reicht es nicht aus, nur das Fuild-Mixin zu verwenden?
Mesqueeb
1
@mesqueeb Du hast vollkommen recht. Diese Medienabfragen waren nicht erforderlich, da sie im SASS-Mixin behandelt werden. Ich habe den Beitrag und den entsprechenden Codepen aktualisiert. Vielen Dank!
Danield
1
Ich verwende regelmäßig die Polyfluid-Dimensionierung, und sie eignet sich hervorragend, um mehrere Dinge gleichzeitig zu skalieren und alles in Schach zu halten. Ehrlich gesagt ist die Tatsache, dass es funktioniert, unglaublich.
Alex McCabe
@AlexMcCabe Diese Polyfluid-Größe sieht toll aus, danke! Das Clamp-Attribut sieht so aus, als ob es nicht alle Anpassungen zulässt (lineare Interpolation impliziert 2 Parameter).
Bertiewo
58

Hier ist eine andere Idee. Die Calc-Funktion verwendet Float mit doppelter Genauigkeit. Daher zeigt es eine Sprungfunktion nahe 1e18. Zum Beispiel,

width: calc(6e18px + 100vw - 6e18px);

Dadurch werden die Werte 0px, 1024px, 2048px usw. erreicht. Siehe Stift https://codepen.io/jdhenckel/pen/bQNgyW

Die Schrittfunktion kann verwendet werden, um mit einigen cleveren Berechnungen abs-Werte und min / max zu erstellen. Zum Beispiel

max(x, y) = x - (x + y) * step(y - x)

Der gegebene Schritt (z) ist Null, wenn z <0 ist, und ansonsten Eins.

Nur eine Idee, nicht sehr praktisch, aber vielleicht macht es Spaß, sie auszuprobieren.


( Achtung: Diese Technik hängt von einem Implementierungsdetail ab, das in keiner Spezifikation enthalten ist. Derzeit funktioniert sie in Chrome und Safari, jedoch nicht in Firefox, Edge oder Internet Explorer, die keine Floats mit doppelter Genauigkeit für CSS-Werte verwenden.)

John Henckel
quelle
1
Dies hat nichts mit der Frage zu tun (interessantes Verhalten)
Sjeiti
16
Das hat alles mit der Frage zu tun. font-size: max(3vw, 36px)wäre genau das, was gefragt wurde, und dies zeigt, wie man max(x, y)eine Sache mit kluger Mathematik macht, und verwendet nicht einmal Medienabfragen, was ein sekundärer (impliziter) Punkt in der Frage war.
Félix Saparelli
Interessant. Dies scheint in Chrome und Safari zu funktionieren, aber nicht in Firefox oder zumindest nicht in neueren Versionen von FF. Sieht aus wie ein Artefakt der zugrunde liegenden Rendering-Engine. Ich vermute, wenn dies früher in FF funktioniert hat, hat die Quantum-Engine das Problem behoben.
Keith Gaughan
3
Ich stimme dieser Antwort zu, da sie sehr klug ist, aber ich würde sie niemals in der Produktion verwenden, da sie sehr dunkel ist. Auch, wie ein vorheriger Kommentar hervorhob, nicht wirklich zuverlässig.
MaxArt
1
Christus ... ich liebe das. Keine Ahnung wie es funktioniert, aber trotzdem.
Alex McCabe
31

Auf andere Weise wird die Schriftgröße langsam erhöht. Dadurch wird die maximale Schriftgröße nicht eingeschränkt, aber selbst auf sehr breiten Bildschirmen sieht sie besser aus. Beantwortet die Frage nicht perfekt, aber es ist 1 Zeile ...

font-size: calc(16px + 1vw);

Update: CSS verbessert und ich empfehle die Verwendung der clamp(min, preferred, max)Funktion:

font-size: clamp(12px, 2vw, 20px);
ViliusL
quelle
Dieser ist sehr interessant, Below @john Henckel scheint dies weiter auszubauen. Er hat auch keine Ablehnung verdient.
Sprechen ist billig Zeigen Sie mir Code
Dies lässt sich gut mit der Verwendung der @mediaAbfrage durch die akzeptierte Antwort kombinieren , um die maximale Größe zu begrenzen.
ToolmakerSteve
4

Irgendwann font-sizeüberschreitet das die 36pxSkala rechts, finde das. Angenommen, es überschreitet, wenn die width: 2048px:

@media screen and (min-width: 2048px) {
  .selector {
     font-size: 36px;
  }
}

Ja, leider müssen Sie die @mediaAbfragen verwenden. Ich hoffe das hat keinen Einfluss.

Praveen Kumar Purushothaman
quelle