Forbedring af Tekst med Typografi-Værktøjer
Tailwind CSS tilbyder et omfattende sæt af værktøjer til håndtering af typografi, hvilket gør det nemt at kontrollere skriftstørrelser, skrifttyper og linjehøjder. Disse værktøjer sikrer, at din tekst er stiliseret ensartet og letlæselig på tværs af forskellige enheder og skærmstørrelser.
Skriftstørrelse
Skriftstørrelsesværktøjer i Tailwind CSS gør det muligt at justere størrelsen på din tekst. Disse værktøjer følger en navngivningskonvention, der gør det nemt at forstå og anvende forskellige 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
Skrifttypevægt
Skrifttypevægt-værktøjer styrer tykkelsen eller fedheden af teksten. Tailwind CSS tilbyder flere værktøjer, der dækker et bredt udvalg af skrifttypevægte, fra tynd til sort.
| Font Weight | Description |
|---|---|
font-thin | Tynd skrifttypevægt. |
font-light | Let skrifttypevægt. |
font-normal | Normal skrifttypevægt. |
font-medium | Medium skrifttypevægt. |
font-semibold | Halvfet skrifttypevægt. |
font-bold | Fed skrifttypevægt. |
font-extrabold | Ekstra fed skrifttypevægt. |
font-black | Sort skrifttypevægt. |
index.html
Linjehøjde
Linjehøjde-værktøjer styrer den lodrette afstand mellem tekstlinjer. Korrekt linjehøjde kan forbedre læsbarheden og det samlede visuelle udtryk af tekstblokke.
| Line Height | Description |
|---|---|
leading-none | Ingen linjehøjde. |
leading-tight | Tæt linjehøjde. |
leading-snug | Kompakt linjehøjde. |
leading-normal | Normal linjehøjde. |
leading-relaxed | Afslappet linjehøjde. |
leading-loose | Løs linjehøjde. |
leading-3, leading-4, leading-5, etc. | Specifik numerisk linjehøjde. |
index.html
Bemærk
Hvis du har brug for specifik information om skriftstørrelse, skrifttykkelse eller linjehøjde, klik venligst på følgende links:
1. Hvilken klasse bruges til at angive skriftstørrelsen til ekstra stor?
2. Hvilken hjælpeklasse bruges til at gøre tekst fed?
3. Hvilken klasse sætter linjehøjden til afslappet?
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
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 af Tekst med Typografi-Værktøjer
Stryg for at vise menuen
Tailwind CSS tilbyder et omfattende sæt af værktøjer til håndtering af typografi, hvilket gør det nemt at kontrollere skriftstørrelser, skrifttyper og linjehøjder. Disse værktøjer sikrer, at din tekst er stiliseret ensartet og letlæselig på tværs af forskellige enheder og skærmstørrelser.
Skriftstørrelse
Skriftstørrelsesværktøjer i Tailwind CSS gør det muligt at justere størrelsen på din tekst. Disse værktøjer følger en navngivningskonvention, der gør det nemt at forstå og anvende forskellige 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
Skrifttypevægt
Skrifttypevægt-værktøjer styrer tykkelsen eller fedheden af teksten. Tailwind CSS tilbyder flere værktøjer, der dækker et bredt udvalg af skrifttypevægte, fra tynd til sort.
| Font Weight | Description |
|---|---|
font-thin | Tynd skrifttypevægt. |
font-light | Let skrifttypevægt. |
font-normal | Normal skrifttypevægt. |
font-medium | Medium skrifttypevægt. |
font-semibold | Halvfet skrifttypevægt. |
font-bold | Fed skrifttypevægt. |
font-extrabold | Ekstra fed skrifttypevægt. |
font-black | Sort skrifttypevægt. |
index.html
Linjehøjde
Linjehøjde-værktøjer styrer den lodrette afstand mellem tekstlinjer. Korrekt linjehøjde kan forbedre læsbarheden og det samlede visuelle udtryk af tekstblokke.
| Line Height | Description |
|---|---|
leading-none | Ingen linjehøjde. |
leading-tight | Tæt linjehøjde. |
leading-snug | Kompakt linjehøjde. |
leading-normal | Normal linjehøjde. |
leading-relaxed | Afslappet linjehøjde. |
leading-loose | Løs linjehøjde. |
leading-3, leading-4, leading-5, etc. | Specifik numerisk linjehøjde. |
index.html
Bemærk
Hvis du har brug for specifik information om skriftstørrelse, skrifttykkelse eller linjehøjde, klik venligst på følgende links:
1. Hvilken klasse bruges til at angive skriftstørrelsen til ekstra stor?
2. Hvilken hjælpeklasse bruges til at gøre tekst fed?
3. Hvilken klasse sætter linjehøjden til afslappet?
Tak for dine kommentarer!
