Forbedring 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 Size | Description |
|---|---|
text-xs | Extra small text. |
text-sm | Small text. |
text-base | Base text (default size). |
text-lg | Large text. |
text-xl | Extra large text. |
text-2xl, text-3xl, text-4xl, text-5xl, text-6xl | Increasingly larger text sizes. |
index.html
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 Weight | Description |
|---|---|
font-thin | Thin font weight. |
font-light | Light font weight. |
font-normal | Normal font weight. |
font-medium | Medium font weight. |
font-semibold | Semi-bold font weight. |
font-bold | Bold font weight. |
font-extrabold | Extra bold font weight. |
font-black | Black font weight. |
index.html
Linjeavstand
Linjeavstandsverktøy styrer den vertikale avstanden mellom tekstlinjer. Korrekt linjeavstand kan forbedre lesbarheten og det visuelle uttrykket til tekstblokker.
| Line Height | Description |
|---|---|
leading-none | No line height. |
leading-tight | Tight line height. |
leading-snug | Snug line height. |
leading-normal | Normal line height. |
leading-relaxed | Relaxed line height. |
leading-loose | Loose line height. |
leading-3, leading-4, leading-5, etc. | Specific numeric line height. |
index.html
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?
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Can you give examples of how to use these typography utilities in Tailwind CSS?
What are the best practices for combining font size, weight, and line height?
Are there any tips for making text more readable with Tailwind CSS?
Awesome!
Completion rate improved to 3.57Forbedring 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 Size | Description |
|---|---|
text-xs | Extra small text. |
text-sm | Small text. |
text-base | Base text (default size). |
text-lg | Large text. |
text-xl | Extra large text. |
text-2xl, text-3xl, text-4xl, text-5xl, text-6xl | Increasingly larger text sizes. |
index.html
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 Weight | Description |
|---|---|
font-thin | Thin font weight. |
font-light | Light font weight. |
font-normal | Normal font weight. |
font-medium | Medium font weight. |
font-semibold | Semi-bold font weight. |
font-bold | Bold font weight. |
font-extrabold | Extra bold font weight. |
font-black | Black font weight. |
index.html
Linjeavstand
Linjeavstandsverktøy styrer den vertikale avstanden mellom tekstlinjer. Korrekt linjeavstand kan forbedre lesbarheten og det visuelle uttrykket til tekstblokker.
| Line Height | Description |
|---|---|
leading-none | No line height. |
leading-tight | Tight line height. |
leading-snug | Snug line height. |
leading-normal | Normal line height. |
leading-relaxed | Relaxed line height. |
leading-loose | Loose line height. |
leading-3, leading-4, leading-5, etc. | Specific numeric line height. |
index.html
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?
Takk for tilbakemeldingene dine!
