Es gibt verschiedene Möglichkeiten, Text in einem Container zu platzieren und ihn so zu skalieren, dass er diesen Container ausfüllt. Wir können verschiedene Technologien verwenden und unterschiedliche Aspekte berücksichtigen. Zählen wir die Wege.
Magic Number mit Viewport-Einheiten
Wenn Sie Text mit vw (Viewport-Breite) Einheiten formatieren, können Sie eine exakte Zahl finden, bei der der Text den Container ziemlich genau ausfüllt und sich beim Ändern der Größe nicht bricht. Das nenne ich eine magische Zahl.
In diesem Fall funktioniert font-size: 25.5vw; bis zu einer Viewport-Breite von 320px, wird aber darüber hinaus immer noch viel zu klein.
Siehe den Pen Fitted Text with Viewport Units von Chris Coyier (@chriscoyier) auf CodePen.
Dies ist eine Art weniger exotische Version von fließender Typografie, die mehr eine Streuung von Viewport-Einheiten und Min/Max-Größen beinhaltet.
FitText
Dave Ruperts FitText ist für diese Aufgabe geeignet. Sie benötigen immer noch eine kleine magische Zahl, um die Skalierung für einen bestimmten Auftrag richtig hinzubekommen.
Siehe den Pen Fitted Text with FitText von Chris Coyier (@chriscoyier) auf CodePen.
FitText ohne jQuery
Wenn Sie kein jQuery verwenden, gibt es Optionen. Auflistung aus dem Repository
- Non-jQuery FitText von @adactio
- Angular.js FitText.js von @patrickmarabeas
- AMP-HTML FitText
- FitText UMD von @peacechen
Beispiel für das erste
Siehe den Pen Fitted Text with FitText (no jQuery) von Chris Coyier (@chriscoyier) auf CodePen.
textFit
Vertauschen Sie die Wörter in FitText und Sie haben textFit! Es ist eine weitere JavaScript-Bibliothek, die Schriftgrößen anpasst, um Text in einen Container zu passen. Ein großes Haftungsausschluss hier jedoch: textFit ist für zwei Dimensionen konzipiert. Sie benötigen also eine Breite und Höhe für das Element, damit es funktioniert.
Siehe den Pen Fitted Text with textFit von Chris Coyier (@chriscoyier) auf CodePen.
fitty
fitty ist eher wie FitText, da es den Text skaliert, um ihn horizontal zu maximieren, aber keine magischen Zahlen zu benötigen scheint.
Siehe den Pen Fitted Text with fitty von Chris Coyier (@chriscoyier) auf CodePen.
TextFill
TextFill basiert auf jQuery und benötigt eine Breite, Höhe und eine konfigurierte maximale Schriftgröße, um zu funktionieren. Hier ist die grundlegende Demo, mit der wir gearbeitet haben.
Siehe den Pen Fitted Text with TextFill von Chris Coyier (@chriscoyier) auf CodePen.
FlowType
FlowType ist darauf ausgelegt, auf einem gesamten Textdokument zu arbeiten und es fließend gleichzeitig zu skalieren, mit minimalen und maximalen Viewport-Größen. Sie können es aber beliebig eingrenzen. Sie wenden auch eine magische Zahl an, um die Dinge so zu gestalten, wie Sie es möchten.
Siehe den Pen Fitted Text with FlowType von Chris Coyier (@chriscoyier) auf CodePen.
Einfach SVG verwenden
Mit width: 100% und einer viewBox wird SVG eine Vollbildbox, die sich mit einem Seitenverhältnis reskaliert. Ein ziemlich cleverer Trick! Um den Text zu formatieren, benötigen Sie einige magische Zahlen, um die viewBox richtig hinzubekommen und den Text an die richtige Stelle zu schieben - aber es ist mit null Abhängigkeiten machbar, genau wie die Viewport-Einheiten-Demo.
Siehe den Pen Fitted Text with SVG von Chris Coyier (@chriscoyier) auf CodePen.
PSA: vw ist kaputt, weil es jedes Mal das falsche misst. Es misst den initialen enthaltenden Block des Viewports, also die gesamte Viewport-Breite, einschließlich der vertikalen Scrollleiste, die fast sicher vorhanden ist. Das ist relevant auf Betriebssystemen, die keine Overlay-Scrollbalken verwenden (Windows, viele Linux-Distributionen und einige macOS-Benutzer deaktivieren Overlay-Scrollbalken); unter Windows ist 100vw im Allgemeinen 17px breiter als die Body-Breite.
Daher sage ich, wenn Sie versuchen, Dinge mit vw präzise zu messen: (a) lassen Sie es einfach, Sie können keinen Erfolg haben; und (b) wenn Sie es trotzdem tun wollen, stellen Sie sicher, dass Sie mindestens 20px Spielraum lassen (wenn das nicht akzeptabel ist, wird vw Ihr Problem nicht lösen) - und seien Sie darauf vorbereitet, dass selbst dann Ihr calc(100vw – 20px) unter bestimmten Umständen breiter sein kann als die Body-Breite.
Gut zu wissen.
Ich stelle fest, wenn ich Viewport-Einheiten verwende, suche ich oft nicht nach superpräziser Skalierung. Ich verwende sie oft, um kleine Viewport-bezogene Anpassungen mit calc vorzunehmen.
Der beste Weg, den ich gefunden habe, um dies zu lösen, ist die Erstellung einer CSS-Variable
--window-widthund deren Einstellung auf100vw. Dann setze ich in JavaScript diese CSS-Variable aufdocument.body.clientWidth, was die Breite des Fensters ohne Scrollbalken ergibt.Gibt es Vorschläge, wie man Text vertikal anpasst? Ich habe immer wieder Leerzeichen über und unter dem Text, die ich nicht loswerde, ohne die Zeilenhöhe mit magischen Zahlen anzupassen.
Möchten Sie den Text vertikal dehnen oder ausrichten?
Ihn dehnen und die Breite proportional halten.
Nur das SVG funktionierte im Firefox korrekt, keines der anderen.
Weder textFit noch TextFill funktionieren in Chrome oder Firefox.
fitty schien nur nach dem Ende des "screen resize"-Ereignisses zu reagieren, aber nicht live. (designbedingt?)
All diese Lösungen fühlen sich an wie der unglaublich schlimme Flash-basierte Text von vor 10 Jahren, außer dem reinen CSS mit vw (warum das eine "magische" Zahl nennen, wenn es einfache Mathematik/Berechnungen sind... nichts Magisches, und es ergibt Sinn). Die Kritik an Flash ist für mich ein wenig amüsant, weil es wirklich nur ein unbeholfenes SVG war, aber SVG ist nur ein "Bild", was ich für benutzerdefinierte Zwecke befürworten kann.
Ich stimme zu, dass der Versuch, Anpassungen mit Text "exakt" zu machen, eine Katastrophe ist und mich an Print-Designer erinnert, die ganze Seitenlayouts mit Text als ein Bild erstellen, weil sie hassten, wie sie das Design nicht perfekt kontrollieren konnten.
Lassen Sie die Kontrolle los und gestalten Sie entweder mit Breakpoints, vw + calc (oder was auch immer) und lassen Sie die Perfektion los. Sie erhalten bessere Designs und weniger Stress. Wenn Sie ein pixelgenaues Layout benötigen, ist SVG die Lösung. CSS muss nicht jede Nischenanforderung erfüllen, es leistet bereits mehr als genug.
Was meint ihr alle dazu?
font-size: calc( 12px + (24 – 12) * ( (100vw – 400px) / ( 800 – 400) ));
Wobei 12 die minimale Schriftgröße, 24 die maximale Schriftgröße, 400 die minimale Viewport-Breite und 800 die maximale Viewport-Breite ist. Wie in diesem Artikel erklärt: https://www.chenhuijing.com/blog/math-and-front-end/#%F0%9F%8E%B9
Ich mache das mit JS, siehe z.B. https://tobireif.com/demos/ → beim Anzeigen der Überschrift reskalieren.
Der Code: Quelltext anzeigen → „Heading Size“.
Pierre Darrieutort hat sich gemeldet, um seine Bibliothek zu teilen, die mit all dem zusammenhängt: Fitext.