Passende Tekst voor een Container

0
43

Er zijn een aantal manieren om te gaan over het zetten van een tekst in een container en hebben het formaat zelf in te vullen die in de container. Er zijn verschillende technieken die we kunnen gebruiken en verschillende overwegingen om over na te denken. Laten we gaan tellen.

Het magische Getal met kijkvenster eenheden

Als u het type van de vw (viewport breedte) eenheden, kunt u een exacte nummer waar de tekst heel aardig past in de container en niet verbreken als u het formaat wijzigt. Ik noem dit een magisch getal.

In dit geval font-size: 25.5 vw; werken naar een 320px viewport, maar nog steeds zal breken veel lager dan dat.

Zie de Pen Voorzien van een Tekst met Kijkvenster Eenheden van Chris Coyier (@chriscoyier) op CodePen.

Dit is een soort van een minder exotische versie van de vloeistof typografie, die houdt meer van een beregening van de viewport eenheden en min/max maten.

FitText

Dave Rupert ‘ s FitText is voor de job. Je moet nog een beetje een magische getal te krijgen van de dimensionering gewoon recht voor een bepaalde taak:

Zie de Pen Voorzien van een Tekst met FitText door Chris Coyier (@chriscoyier) op CodePen.

FitText zonder jQuery

Als u niet gebruik van jQuery, er zijn opties. Vermeld van de repo:

  • niet-jQuery FitText van @adactio
  • Angular.js FitText.js van @patrickmarabeas
  • AMP-HTML FitText
  • FitText UMD door @peacechen

Voorbeeld van het eerste:

Zie de Pen Voorzien van een Tekst met FitText (geen jQuery) door Chris Coyier (@chriscoyier) op CodePen.

textFit

Wissel de woorden in FitText rond en je hebt textFit! Het is een JavaScript bibliotheek die past de lettergrootte aan te passen tekst in een container. Grote valkuil hier wel: textFit is ontworpen voor twee dimensies. Dus je moet een breedte en hoogte van het element om het te doen, het is wat.

Zie de Pen Voorzien van een Tekst met textFit door Chris Coyier (@chriscoyier) op CodePen.

fitty

fitty is meer als FitText in dat het formaat van het type te maximaliseren alleen horizontaal, maar eigenlijk lijkt het vereist geen magische getallen.

Zie de Pen Voorzien van een Tekst met fitty door Chris Coyier (@chriscoyier) op CodePen.

TextFill

TextFill jQuery gebaseerde en vereist een breedte, de hoogte en een ingestelde maximale grootte van het lettertype aan het werk. Hier is de basic demo werken we uit:

Zie de Pen Voorzien van een Tekst met TextFill door Chris Coyier (@chriscoyier) op CodePen.

FlowType

FlowType is een soort ontworpen om te werken op een geheel document van de tekst, de grootte van het al vlot in een keer, met een minimum-en maximum-viewport maten. Maar kunt u het bereik voor hoe jij het wilt. U passen ook een magisch getal om dingen hoe u ze wilt.

Zie de Pen Voorzien van een Tekst met FlowType door Chris Coyier (@chriscoyier) op CodePen.

Gebruik gewoon SVG –

Met width: 100% en een viewBox, SVG zal een fullsize vak dat verandert met een aspect ratio. Mooie nette truc! Voor het instellen van het type, je hebt een aantal magische getallen te krijgen dat viewBox gewoon rechts en duw de tekst op de juiste plek, maar het is goed te doen met nul afhankelijkheden, net als de viewport eenheden demo.

Zie de Pen Voorzien van een Tekst met de SVG van Chris Coyier (@chriscoyier) op CodePen.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!