Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Forbedring av Tekst med Typografi-Verktøy | Kjernekonsepter og Grunnleggende Styling
Tailwind CSS for Webbutvikling

bookForbedring av Tekst med Typografi-Verktøy

Tailwind CSS tilbyr et omfattende sett med verktøy for håndtering av typografi, slik at du enkelt kan kontrollere skriftstørrelser, skriftvekter og linjeavstander. Disse verktøyene bidrar til å sikre at teksten din er konsekvent formatert og lett å lese på ulike enheter og skjermstørrelser.

Skriftstørrelse

Verktøy for skriftstørrelse i Tailwind CSS gjør det mulig å justere størrelsen på teksten. Disse verktøyene følger en navnekonvensjon som gjør det enkelt å forstå og bruke ulike størrelser.

Font SizeDescription
text-xsExtra small text.
text-smSmall text.
text-baseBase text (default size).
text-lgLarge text.
text-xlExtra large text.
text-2xl, text-3xl, text-4xl, text-5xl, text-6xlIncreasingly larger text sizes.
index.html

index.html

copy

Skriftvekt

Skriftvekt-verktøy styrer tykkelsen eller fetheten på teksten. Tailwind CSS tilbyr flere verktøy som dekker et bredt spekter av skriftvekter, fra tynn til svart.

Font WeightDescription
font-thinThin font weight.
font-lightLight font weight.
font-normalNormal font weight.
font-mediumMedium font weight.
font-semiboldSemi-bold font weight.
font-boldBold font weight.
font-extraboldExtra bold font weight.
font-blackBlack font weight.
index.html

index.html

copy

Linjeavstand

Linjeavstandsverktøy styrer den vertikale avstanden mellom tekstlinjer. Korrekt linjeavstand kan forbedre lesbarheten og det visuelle uttrykket til tekstblokker.

Line HeightDescription
leading-noneNo line height.
leading-tightTight line height.
leading-snugSnug line height.
leading-normalNormal line height.
leading-relaxedRelaxed line height.
leading-looseLoose line height.
leading-3, leading-4, leading-5, etc.Specific numeric line height.
index.html

index.html

copy

Merk

Hvis du trenger spesifikk informasjon om skriftstørrelse, skriftvekt eller linjehøyde, vennligst klikk på følgende lenker:

1. Hvilken klasse brukes for å angi skriftstørrelse til ekstra stor?

2. Hvilken hjelpeklasse bruker du for å gjøre teksten fet?

3. Hvilken klasse setter linjehøyden til å være avslappet?

question mark

Hvilken klasse brukes for å angi skriftstørrelse til ekstra stor?

Select the correct answer

question mark

Hvilken hjelpeklasse bruker du for å gjøre teksten fet?

Select the correct answer

question mark

Hvilken klasse setter linjehøyden til å være avslappet?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 7

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 3.57

bookForbedring av Tekst med Typografi-Verktøy

Sveip for å vise menyen

Tailwind CSS tilbyr et omfattende sett med verktøy for håndtering av typografi, slik at du enkelt kan kontrollere skriftstørrelser, skriftvekter og linjeavstander. Disse verktøyene bidrar til å sikre at teksten din er konsekvent formatert og lett å lese på ulike enheter og skjermstørrelser.

Skriftstørrelse

Verktøy for skriftstørrelse i Tailwind CSS gjør det mulig å justere størrelsen på teksten. Disse verktøyene følger en navnekonvensjon som gjør det enkelt å forstå og bruke ulike størrelser.

Font SizeDescription
text-xsExtra small text.
text-smSmall text.
text-baseBase text (default size).
text-lgLarge text.
text-xlExtra large text.
text-2xl, text-3xl, text-4xl, text-5xl, text-6xlIncreasingly larger text sizes.
index.html

index.html

copy

Skriftvekt

Skriftvekt-verktøy styrer tykkelsen eller fetheten på teksten. Tailwind CSS tilbyr flere verktøy som dekker et bredt spekter av skriftvekter, fra tynn til svart.

Font WeightDescription
font-thinThin font weight.
font-lightLight font weight.
font-normalNormal font weight.
font-mediumMedium font weight.
font-semiboldSemi-bold font weight.
font-boldBold font weight.
font-extraboldExtra bold font weight.
font-blackBlack font weight.
index.html

index.html

copy

Linjeavstand

Linjeavstandsverktøy styrer den vertikale avstanden mellom tekstlinjer. Korrekt linjeavstand kan forbedre lesbarheten og det visuelle uttrykket til tekstblokker.

Line HeightDescription
leading-noneNo line height.
leading-tightTight line height.
leading-snugSnug line height.
leading-normalNormal line height.
leading-relaxedRelaxed line height.
leading-looseLoose line height.
leading-3, leading-4, leading-5, etc.Specific numeric line height.
index.html

index.html

copy

Merk

Hvis du trenger spesifikk informasjon om skriftstørrelse, skriftvekt eller linjehøyde, vennligst klikk på følgende lenker:

1. Hvilken klasse brukes for å angi skriftstørrelse til ekstra stor?

2. Hvilken hjelpeklasse bruker du for å gjøre teksten fet?

3. Hvilken klasse setter linjehøyden til å være avslappet?

question mark

Hvilken klasse brukes for å angi skriftstørrelse til ekstra stor?

Select the correct answer

question mark

Hvilken hjelpeklasse bruker du for å gjøre teksten fet?

Select the correct answer

question mark

Hvilken klasse setter linjehøyden til å være avslappet?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 7
some-alt