Passande Text till en Container

0
20

Det finns ett antal sätt att gå tillväga för att sätta lite text i en container och med den storleken själv att fylla behållaren. Det finns olika tekniker som vi kan använda och olika faktorer att tänka på. Låt oss räkna på olika sätt.

Magiska Nummer med virtuella enheter

Om du ställer in typ med vw (viewport bredd) enheter, kan du hitta en exakt siffra där texten passar ganska nära behållaren och går inte sönder när du ändrar storlek. Jag skulle kalla detta en magisk siffra.

I detta fall, font-size: 25.5 vw, fungerar ned till 320px viewport, men fortfarande kommer att bryta mycket lägre än så.

Se Pennan Utrustade Text med Virtuella Enheter av Chris Coyier (@chriscoyier) på CodePen.

Detta är typ av en mindre exotiska version av vätska typografi, som innebär mer av ett stänk av virtuella enheter och min/max storlekar.

FitText

Dave Rupert FitText är för jobb. Du behöver fortfarande lite av en magisk siffra för att få dimensionering precis rätt för ett visst jobb:

Se Pennan Utrustade Sms: a med FitText av Chris Coyier (@chriscoyier) på CodePen.

FitText utan jQuery

Om du inte använder jQuery, det finns alternativ. Noterat från reporäntan:

  • icke-jQuery FitText från @adactio
  • Angular.js FitText.js från @patrickmarabeas
  • AMP-HTML-FitText
  • FitText UMD av @peacechen

Exempel på den första:

Se Pennan Utrustade Sms: a med FitText (nr jQuery) av Chris Coyier (@chriscoyier) på CodePen.

textFit

Byta ord i FitText runt och du har själv textFit! Det är ett annat JavaScript bibliotek som teckenstorlek för att anpassa texten i en container. Stor varning här dock: textFit är avsedd för två-mått. Så du behöver en bredd och höjd på elementet för att det ska göra det: s sak.

Se Pennan Utrustade Sms: a med textFit av Chris Coyier (@chriscoyier) på CodePen.

fitty

fitty är mer som FitText i och med att det ändrar storlek typ för att maximera bara horisontellt, men verkar faktiskt kräver inga magiska tal.

Se Pennan Utrustade Sms: a med fitty av Chris Coyier (@chriscoyier) på CodePen.

TextFill

TextFill är jQuery-baserade och kräver en bredd, höjd, och en inställd maximal teckenstorlek för att arbeta. Här är de grundläggande demo-vi har jobbat från:

Se Pennan Utrustade Sms: a med TextFill av Chris Coyier (@chriscoyier) på CodePen.

FlowType

FlowType är typ av utformats för att arbeta på ett helt dokument med text, ändra storlek på det hela smidigt på en gång, med lägsta och högsta vyport storlekar. Men du kan räckvidden den hur du vill. Du också gälla ett magiskt nummer för att få saker hur du vill ha dem.

Se Pennan Utrustade Sms: a med FlowType av Chris Coyier (@chriscoyier) på CodePen.

Bara använda SVG

Med bredd: 100% och en viewBox, SVG kommer att vara en stor låda som ändrar storlek med ett bildförhållande. Ganska snyggt trick! För att ställa in typ, behöver du några magiska siffror för att få det viewBox bara höger och skjut text till rätt plats — men det är genomförbart med noll beroenden, precis som det virtuella enheter demo.

Se Pennan Utrustade Sms: a med SVG av Chris Coyier (@chriscoyier) på CodePen.

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sociala nätverk, och mycket mer!