Passende Tekst til en Beholder

0
19

Det finnes en rekke måter å gå om å sette noen tekst i en beholder, og la den størrelsen seg selv til å fylle beholderen. Det finnes ulike teknologier som vi kan bruke og ulike hensyn å tenke på. La oss telle måter.

Magiske Tallet er det med viewport enheter

Hvis du angir type med vw (viewport bredde) enheter, kan du finne en eksakt antall på hvor teksten ganske tett passer beholderen og ikke bryte så du endre størrelsen på. Jeg vil kalle dette et magisk tall.

I dette tilfellet, font-size: 25.5 vw; fungerer ned til en 320px viewport, men fortsatt vil bryte mye lavere enn det.

Se Penn Utstyrt Tekst med Viewport Enheter av Chris Coyier (@chriscoyier) på CodePen.

Dette er en slags en mindre eksotisk versjon av væske typografi, som innebærer mer en sprinkling av viewport enheter og min/maks størrelser.

FitText

Dave Rupert FitText er opp til jobben. Du fortsatt trenger en bit av et magisk tall for å få dimensjonering akkurat riktig for noen bestemt jobb:

Se Penn Utstyrt Tekst med FitText av Chris Coyier (@chriscoyier) på CodePen.

FitText uten jQuery

Hvis du ikke bruker jQuery, det finnes alternativer. Oppført fra repo:

  • ikke-jQuery FitText fra @adactio
  • Angular.js FitText.js fra @patrickmarabeas
  • AMP-HTML-FitText
  • FitText UMD av @peacechen

Eksempel på det første:

Se Penn Utstyrt Tekst med FitText (ingen jQuery) av Chris Coyier (@chriscoyier) på CodePen.

textFit

Bytte ord i FitText rundt, og du fått deg textFit! Det er et JavaScript-bibliotek som justerer font størrelser for å passe inn i en container. Store forbehold her om: textFit er utformet for to dimensjoner. Så trenger du en bredde og høyde på elementet for å gjøre det er tingen.

Se Penn Utstyrt Tekst med textFit av Chris Coyier (@chriscoyier) på CodePen.

fitty

fitty er mer som FitText i at det endrer størrelsen type for å maksimere bare horisontalt, men faktisk ser ut til å kreve noe magisk tall.

Se Penn Utstyrt Tekst med fitty av Chris Coyier (@chriscoyier) på CodePen.

TextFill

TextFill er jQuery-basert, og krever en bredde, høyde, og en som er konfigurert maksimal skriftstørrelse for å fungere. Her er de grunnleggende demo-vi har jobbet fra:

Se Penn Utstyrt Tekst med TextFill av Chris Coyier (@chriscoyier) på CodePen.

FlowType

FlowType er slags utviklet for å fungere på en hele dokumentet til tekst, endre størrelse det hele knirkefritt på en gang, med minimum og optimal vindu størrelser. Men kan du omfang er det imidlertid du vil. Du kan også bruke en magisk tall for å få ting slik du vil ha dem.

Se Penn Utstyrt Tekst med FlowType av Chris Coyier (@chriscoyier) på CodePen.

Bare bruk SVG

Med bredde: 100% og en viewBox, SVG vil være en wiki-boksen som endrer størrelsen med et sideforhold. Ganske ryddig triks! For å angi type, vil du trenger noen magiske tall for å få det viewBox bare rett og trykk teksten til rett sted, men det er gjennomførbart med null avhengigheter, akkurat som viewport enheter demo.

Se Penn Utstyrt Tekst med SVG av Chris Coyier (@chriscoyier) på CodePen.

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!