Passende Text zu einem Container

0
41

Es gibt eine Reihe von Möglichkeiten, darüber zu gehen, setzen einige text in einem container und die Größe selbst zu füllen, dass die container. Es gibt verschiedene Technologien, die wir verwenden können, und verschiedene überlegungen zu denken. Lassen Sie uns zählen die Art und Weise.

Magische Zahl, die es mit viewport-Einheiten

Wenn Sie geben Sie mit vw (viewport width) Einheiten, können Sie eine genaue Zahl, wo der text ziemlich eng, passt in die container und nicht brechen, wie Sie die Größe ändern. Ich würde das als eine Magische Zahl.

In diesem Fall font-size: 25.5 vw; eignet sich für bis zu eine 320px-viewport, aber immer noch brechen viel niedriger als die.

Finden Sie die Stift Ausgestattet, Text-Viewport-Einheiten von Chris Coyier (@chriscoyier) auf CodePen.

Das ist eine weniger exotische version der fluid-Typografie, was bedeutet, mehr von dem, eine Prise von viewport-Einheiten und min/max-Größen.

FitText

Dave Rupert FitText ist für den job. Sie müssen noch ein bisschen eine Magische Zahl zu bekommen, die Dimensionierung genau das richtige für einen bestimmten job:

Finden Sie die Stift Ausgestattet, Text mit FitText von Chris Coyier (@chriscoyier) auf CodePen.

FitText, ohne jQuery

Wenn Sie nicht mit jQuery, da gibt es Optionen. Aufgeführt von der repo:

  • nicht-jQuery-FitText von @adactio
  • Angular.js FitText.js von @patrickmarabeas
  • AMP-HTML FitText
  • FitText UMD von @peacechen

Beispiel für die erste:

Finden Sie die Stift Ausgestattet, Text mit FitText (ohne jQuery) von Chris Coyier (@chriscoyier) auf CodePen.

textFit

Tauschen Sie die Wörter in FitText herum und du hast dich textFit! Es ist eine weitere JavaScript-Bibliothek, die passt sich der Schriftgröße anpassen von text in einem container. Großer Nachteil hier allerdings: textFit ist für zwei Dimensionen. So müssen Sie eine Breite und Höhe auf das element, es zu tun es ist Sache.

Finden Sie die Stift Ausgestattet, Text mit textFit von Chris Coyier (@chriscoyier) auf CodePen.

fuffzig

fuffzig mehr wie FitText, dass es die Größe geben zu maximieren, nur horizontal, sondern scheint tatsächlich keine magischen zahlen.

Finden Sie die Stift Ausgestattet, Text mit fuffzig von Chris Coyier (@chriscoyier) auf CodePen.

TextFill

TextFill ist jQuery-basiert und erfordert eine Breite, Höhe, und eine konfigurierte maximale Schriftgröße zu arbeiten. Hier ist die grundlegende demo, die wir ‘ ve wurden arbeiten von:

Finden Sie die Stift Ausgestattet, Text mit TextFill von Chris Coyier (@chriscoyier) auf CodePen.

FlowType

FlowType ist eine Art entwickelt, um auf ein ganzes Dokument von text, ändern der Größe alle flüssig auf einmal, mit minimal-und maximal-viewport-Größen. Aber Sie können den Gültigkeitsbereich Sie es wie Sie wollen. Sie gelten auch, eine Magische Zahl, um die Dinge, wie Sie wollen.

Finden Sie die Stift Ausgestattet, Text mit FlowType von Chris Coyier (@chriscoyier) auf CodePen.

Nur SVG verwenden

Mit width: 100% und einer viewBox, SVG ein fullsize-box, die die Größe mit einem Seitenverhältnis. Ziemlich netter trick! Um den Typ, müssen Sie einige Magische zahlen zu bekommen, dass die viewBox nur rechts und schieben Sie den text in die richtige Stelle — aber es ist machbar mit null Abhängigkeiten, ebenso wie die viewport-Einheiten demo.

Finden Sie die Stift Ausgestattet, Text mit SVG von Chris Coyier (@chriscoyier) auf CodePen.

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!