Tekstin Parantaminen Typografian Apuvälineillä
Tailwind CSS tarjoaa laajan valikoiman typografian hallintaan tarkoitettuja apuluokkia, joiden avulla voit helposti säätää kirjasinkokoja, kirjasinpainoja ja rivivälejä. Näiden apuluokkien avulla varmistat, että tekstisi on tyyliltään yhtenäistä ja helposti luettavaa eri laitteilla ja näytön ko’oissa.
Kirjasinkoko
Tailwind CSS:n kirjasinkoon apuluokkien avulla voit säätää tekstin kokoa. Näissä apuluokissa käytetään nimeämiskäytäntöä, joka tekee erikokoisten tekstien ymmärtämisestä ja käyttämisestä helppoa.
| 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
Fontin paksuus
Fontin paksuus -apuluokat hallitsevat tekstin paksuutta tai lihavuutta. Tailwind CSS tarjoaa useita apuluokkia, jotka kattavat laajan valikoiman fontin paksuuksia ohuesta mustaan.
| Fontin paksuus | Kuvaus |
|---|---|
font-thin | Ohut fontin paksuus. |
font-light | Kevyt fontin paksuus. |
font-normal | Normaali fontin paksuus. |
font-medium | Keskipaksu fontin paksuus. |
font-semibold | Puolilihava fontin paksuus. |
font-bold | Lihavoitu fontin paksuus. |
font-extrabold | Erittäin lihava fontin paksuus. |
font-black | Musta fontin paksuus. |
index.html
Riviväli
Riviväli-apuluokat hallitsevat tekstirivien välistä pystysuoraa tilaa. Sopiva riviväli parantaa luettavuutta ja tekstilohkojen yleistä visuaalista ilmettä.
| Riviväli | Kuvaus |
|---|---|
leading-none | Ei riviväliä. |
leading-tight | Tiukka riviväli. |
leading-snug | Tiivis riviväli. |
leading-normal | Normaali riviväli. |
leading-relaxed | Väljä riviväli. |
leading-loose | Erittäin väljä riviväli. |
leading-3, leading-4, leading-5, jne. | Tietty numeerinen riviväli. |
index.html
Huomio
Jos tarvitset tarkempia tietoja fonttikoon, fonttipainon tai rivivälin määrittämisestä, klikkaa seuraavia linkkejä:
1. Mitä luokkaa käyttäisit asettaaksesi fonttikooksi extra large?
2. Mitä apuluokkaa käytetään tekstin lihavointiin?
3. Mikä luokka asettaa rivivälin väljäksi?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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.57Tekstin Parantaminen Typografian Apuvälineillä
Pyyhkäise näyttääksesi valikon
Tailwind CSS tarjoaa laajan valikoiman typografian hallintaan tarkoitettuja apuluokkia, joiden avulla voit helposti säätää kirjasinkokoja, kirjasinpainoja ja rivivälejä. Näiden apuluokkien avulla varmistat, että tekstisi on tyyliltään yhtenäistä ja helposti luettavaa eri laitteilla ja näytön ko’oissa.
Kirjasinkoko
Tailwind CSS:n kirjasinkoon apuluokkien avulla voit säätää tekstin kokoa. Näissä apuluokissa käytetään nimeämiskäytäntöä, joka tekee erikokoisten tekstien ymmärtämisestä ja käyttämisestä helppoa.
| 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
Fontin paksuus
Fontin paksuus -apuluokat hallitsevat tekstin paksuutta tai lihavuutta. Tailwind CSS tarjoaa useita apuluokkia, jotka kattavat laajan valikoiman fontin paksuuksia ohuesta mustaan.
| Fontin paksuus | Kuvaus |
|---|---|
font-thin | Ohut fontin paksuus. |
font-light | Kevyt fontin paksuus. |
font-normal | Normaali fontin paksuus. |
font-medium | Keskipaksu fontin paksuus. |
font-semibold | Puolilihava fontin paksuus. |
font-bold | Lihavoitu fontin paksuus. |
font-extrabold | Erittäin lihava fontin paksuus. |
font-black | Musta fontin paksuus. |
index.html
Riviväli
Riviväli-apuluokat hallitsevat tekstirivien välistä pystysuoraa tilaa. Sopiva riviväli parantaa luettavuutta ja tekstilohkojen yleistä visuaalista ilmettä.
| Riviväli | Kuvaus |
|---|---|
leading-none | Ei riviväliä. |
leading-tight | Tiukka riviväli. |
leading-snug | Tiivis riviväli. |
leading-normal | Normaali riviväli. |
leading-relaxed | Väljä riviväli. |
leading-loose | Erittäin väljä riviväli. |
leading-3, leading-4, leading-5, jne. | Tietty numeerinen riviväli. |
index.html
Huomio
Jos tarvitset tarkempia tietoja fonttikoon, fonttipainon tai rivivälin määrittämisestä, klikkaa seuraavia linkkejä:
1. Mitä luokkaa käyttäisit asettaaksesi fonttikooksi extra large?
2. Mitä apuluokkaa käytetään tekstin lihavointiin?
3. Mikä luokka asettaa rivivälin väljäksi?
Kiitos palautteestasi!
