Förbättra Text med Typografiverktyg
Tailwind CSS erbjuder ett omfattande utbud av verktyg för hantering av typografi, vilket gör det möjligt att enkelt kontrollera teckenstorlekar, teckentjocklekar och radavstånd. Dessa verktyg säkerställer att texten är konsekvent formaterad och lättläst på olika enheter och skärmstorlekar.
Teckenstorlek
Verktyg för teckenstorlek i Tailwind CSS möjliggör justering av textens storlek. Dessa verktyg följer en namngivningskonvention som gör det enkelt att förstå och använda olika storlekar.
| 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
Teckentjocklek
Verktyg för teckentjocklek styr textens tjocklek eller fetstil. Tailwind CSS erbjuder flera verktyg som täcker ett brett spektrum av teckentjocklekar, från tunn till svart.
| Font Weight | Description |
|---|---|
font-thin | Tunn teckentjocklek. |
font-light | Lätt teckentjocklek. |
font-normal | Normal teckentjocklek. |
font-medium | Medium teckentjocklek. |
font-semibold | Halvfet teckentjocklek. |
font-bold | Fet teckentjocklek. |
font-extrabold | Extra fet teckentjocklek. |
font-black | Svart teckentjocklek. |
index.html
Radavstånd
Verktyg för radavstånd styr det vertikala avståndet mellan textrader. Korrekt radavstånd kan förbättra läsbarheten och det visuella intrycket av textblock.
| Line Height | Description |
|---|---|
leading-none | Inget radavstånd. |
leading-tight | Täta rader. |
leading-snug | Kompakta rader. |
leading-normal | Normalt radavstånd. |
leading-relaxed | Avslappnat radavstånd. |
leading-loose | Stort radavstånd. |
leading-3, leading-4, leading-5, etc. | Specifikt numeriskt radavstånd. |
index.html
Obs
För specifik information om teckenstorlek, teckentjocklek eller radavstånd, vänligen klicka på följande länkar:
1. Vilken klass används för att ställa in teckenstorleken till extra stor?
2. Vilken hjälparklass används för att göra texten fet?
3. Vilken klass ställer in radavståndet till avslappnat?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
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.57Förbättra Text med Typografiverktyg
Svep för att visa menyn
Tailwind CSS erbjuder ett omfattande utbud av verktyg för hantering av typografi, vilket gör det möjligt att enkelt kontrollera teckenstorlekar, teckentjocklekar och radavstånd. Dessa verktyg säkerställer att texten är konsekvent formaterad och lättläst på olika enheter och skärmstorlekar.
Teckenstorlek
Verktyg för teckenstorlek i Tailwind CSS möjliggör justering av textens storlek. Dessa verktyg följer en namngivningskonvention som gör det enkelt att förstå och använda olika storlekar.
| 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
Teckentjocklek
Verktyg för teckentjocklek styr textens tjocklek eller fetstil. Tailwind CSS erbjuder flera verktyg som täcker ett brett spektrum av teckentjocklekar, från tunn till svart.
| Font Weight | Description |
|---|---|
font-thin | Tunn teckentjocklek. |
font-light | Lätt teckentjocklek. |
font-normal | Normal teckentjocklek. |
font-medium | Medium teckentjocklek. |
font-semibold | Halvfet teckentjocklek. |
font-bold | Fet teckentjocklek. |
font-extrabold | Extra fet teckentjocklek. |
font-black | Svart teckentjocklek. |
index.html
Radavstånd
Verktyg för radavstånd styr det vertikala avståndet mellan textrader. Korrekt radavstånd kan förbättra läsbarheten och det visuella intrycket av textblock.
| Line Height | Description |
|---|---|
leading-none | Inget radavstånd. |
leading-tight | Täta rader. |
leading-snug | Kompakta rader. |
leading-normal | Normalt radavstånd. |
leading-relaxed | Avslappnat radavstånd. |
leading-loose | Stort radavstånd. |
leading-3, leading-4, leading-5, etc. | Specifikt numeriskt radavstånd. |
index.html
Obs
För specifik information om teckenstorlek, teckentjocklek eller radavstånd, vänligen klicka på följande länkar:
1. Vilken klass används för att ställa in teckenstorleken till extra stor?
2. Vilken hjälparklass används för att göra texten fet?
3. Vilken klass ställer in radavståndet till avslappnat?
Tack för dina kommentarer!
