Les propriétés de police CSS définissent la famille de polices, l'audace, la taille et le style d'un texte.
Différence entre les polices de caractères Serif et Sans-serif
CSS Familles de polices
En CSS, il existe deux types de noms de famille de polices:
- famille générique - un groupe de familles de polices avec un look similaire (comme "Serif" ou "Monospace")
- famille de polices- une famille de polices spécifiques (comme "Times New Roman" ou "Arial")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana |
"Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console |
All monospace characters have the same width |
 | Remarque: Sur les écrans d'ordinateur, les polices sans-serif sont considérés comme plus facile à lire que les polices serif. |
|---|
Famille de polices
La famille de la police d'un texte est défini avec le font-family propriété.
Le font-family propriété doit contenir plusieurs noms de police comme un système "de repli". Si le navigateur ne supporte pas la première police, il tente la police suivante, et ainsi de suite.
Commencez par la police que vous voulez, et se terminer par une famille générique, pour laisser le navigateur choisir une police similaire dans la famille générique, si aucune autre polices sont disponibles.
Remarque: Si le nom d'une famille de polices est plus d'un mot, il doit être entre guillemets, comme: "Times New Roman".
Plus d'une famille de polices est spécifié dans une liste séparée par des virgules:
Pour les combinaisons de polices couramment utilisés, consultez notre Web Safe Regroupements polices .
Le style de police
La font-style propriété est principalement utilisée pour spécifier le texte en italique.
Cette propriété a trois valeurs:
- normale - Le texte est affiché normalement
- italic - Le texte est en italique
- oblique - Le texte est «penché» (oblique est très similaire en italique, mais moins soutenu)
Exemple
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
} Essayez - le vous - même » Taille de police
La font-size de font-size de propriété définit la taille du texte.
Être en mesure de gérer la taille du texte est important dans la conception web. Cependant, vous ne devriez pas utiliser des ajustements de taille de police pour faire des paragraphes ressemblent rubriques, ou des positions ressemblent paragraphes.
Toujours utiliser les balises HTML appropriées, comme <h1> - <h6> pour les rubriques et <p> pour les paragraphes.
La valeur font-size peut être une taille absolue ou relative.
Taille absolue:
- Définit le texte à une taille spécifiée
- Ne pas permettre à un utilisateur de changer la taille du texte dans tous les navigateurs (mauvais pour des raisons d'accessibilité)
- taille absolue est utile lorsque la taille physique de la sortie est connue
Taille relative:
- Définit la taille par rapport aux éléments environnants
- Permet à un utilisateur de changer la taille du texte dans les navigateurs
| Remarque: Si vous ne spécifiez pas une taille de police, la taille par défaut pour le texte normal, comme les paragraphes, est 16px (16px = 1em). |
|---|
Définir la taille de la police avec des pixels
Réglage de la taille du texte avec des pixels vous donne le plein contrôle sur la taille du texte:
Exemple
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
} Essayez - le vous - même » Astuce: Si vous utilisez pixels, vous pouvez toujours utiliser l'outil de zoom pour redimensionner la page entière.
Définir la taille de la police Avec Em
Pour permettre aux utilisateurs de redimensionner le texte (dans le menu du navigateur), de nombreux développeurs utilisent em au lieu de pixels.
L'unité de taille de em est recommandée par le W3C.
1em est égale à la taille de la police actuelle. La taille du texte par défaut dans les navigateurs est 16px. Ainsi, la taille par défaut de 1em est 16px.
La taille peut être calculée à partir de pixels à em en utilisant cette formule:pixels/ 16 =em
Exemple
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
} Essayez - le vous - même » Dans l'exemple ci-dessus, la taille du texte en em est identique à l'exemple précédent en pixels. Cependant, avec la taille de l'em, il est possible d'ajuster la taille du texte dans tous les navigateurs.
Malheureusement, il y a encore un problème avec les anciennes versions de IE. Le texte devient plus grande que ce qu'elle devrait lorsqu'elle est faite plus grande et plus petite que ce qu'elle devrait quand fait plus petit.
Utilisez une combinaison de pourcentage et Em
La solution qui fonctionne dans tous les navigateurs, est de définir une taille de police par défaut en pour cent pour l'élément <body>:
Exemple
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
} Essayez - le vous - même » Notre code fonctionne maintenant très bien! Il montre la même taille du texte dans tous les navigateurs, et permet à tous les navigateurs pour zoomer ou redimensionner le texte!
Font Poids
Le font-weight propriété spécifie le poids d'une police:
Font Variant
Le font-variant propriété indique si oui ou non un texte doit être affiché dans une police en petites capitales.
Dans une police en petites capitales, toutes les lettres minuscules sont converties en majuscules. Cependant, les lettres majuscules converties apparaît dans une taille de police plus petite que les lettres majuscules d'origine dans le texte.
Exemple
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
} Essayez - le vous - même » 
Autres exemples
Toutes les propriétés de la police dans une déclaration
Cet exemple montre comment utiliser le raccourci pour définir toutes les propriétés de la police dans une déclaration.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »
Toutes les propriétés CSS de polices
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |