Contenu du cours
Tailwind CSS pour le Développement Web
Tailwind CSS pour le Développement Web
Utilitaires de Typographie
Tailwind CSS fournit un ensemble robuste d'utilitaires pour gérer la typographie, vous permettant de contrôler facilement les tailles de police, les graisses de police et les hauteurs de ligne. Ces utilitaires aident à garantir que votre texte est stylé de manière cohérente et facilement lisible sur différents appareils et tailles d'écran.
Taille de la police
Les utilitaires de taille de police dans Tailwind CSS vous permettent d'ajuster la taille de votre texte. Ces utilitaires suivent une convention de nommage qui facilite la compréhension et l'application de différentes tailles.
| Taille de la police | Description |
|---|---|
text-xs | Texte très petit. |
text-sm | Texte petit. |
text-base | Texte de base (taille par défaut). |
text-lg | Texte grand. |
text-xl | Texte très grand. |
text-2xl, text-3xl, text-4xl, text-5xl, text-6xl | Tailles de texte de plus en plus grandes. |
index.html
Poids de la Police
Les utilitaires de poids de police contrôlent l'épaisseur ou la graisse du texte. Tailwind CSS fournit plusieurs utilitaires pour couvrir une large gamme de poids de police, de fin à noir.
| Poids de la Police | Description |
|---|---|
font-thin | Poids de police fin. |
font-light | Poids de police léger. |
font-normal | Poids de police normal. |
font-medium | Poids de police moyen. |
font-semibold | Poids de police semi-gras. |
font-bold | Poids de police gras. |
font-extrabold | Poids de police extra-gras. |
font-black | Poids de police noir. |
index.html
Hauteur de ligne
Les utilitaires de hauteur de ligne contrôlent l'espacement vertical entre les lignes de texte. Une hauteur de ligne appropriée peut améliorer la lisibilité et l'apparence visuelle globale des blocs de texte.
| Hauteur de ligne | Description |
|---|---|
leading-none | Pas de hauteur de ligne. |
leading-tight | Hauteur de ligne serrée. |
leading-snug | Hauteur de ligne ajustée. |
leading-normal | Hauteur de ligne normale. |
leading-relaxed | Hauteur de ligne détendue. |
leading-loose | Hauteur de ligne lâche. |
leading-3, leading-4, leading-5, etc. | Hauteur de ligne numérique spécifique. |
index.html
Remarque
Si vous avez besoin d'informations spécifiques sur la taille de la police, le poids de la police ou la hauteur de ligne, veuillez cliquer sur les liens suivants :
1. Quelle classe utiliseriez-vous pour définir la taille de la police sur extra large ?
2. Quelle classe utilitaire utiliseriez-vous pour rendre le texte en gras ?
3. Quelle classe définit l'interligne comme étant détendu ?
Merci pour vos commentaires !
