CSS Police
Les propriétés de police CSS définissent la police, la graisse, la taille et le style du texte.
La différence entre les polices à empattement et sans empattement
Sur les écrans d'ordinateur, les polices sans empattement sont considérées comme plus faciles à lire que les polices à empattement.
Police CSS
En CSS, il existe deux types de noms de familles de polices :
- Familles de polices génériques- Un groupe de familles de polices avec des apparences similaires (comme « Serif » ou « Monospace »)
- Familles de polices spécifiques- Une famille de polices spécifique (comme « Times » ou « Courier »)
| Famille générique | Famille de polices | Description |
|---|---|---|
| Serif | Times New Roman Georgia |
Dans les polices à empattements, les caractères ont une décoration supplémentaire aux extrémités des traits. |
| Sans-serif | Arial Verdana |
« Sans » signifie sans - ces polices n'ont pas de décoration supplémentaire aux extrémités. |
| Monospace | Courier New Lucida Console |
Tous les caractères monospacés ont la même largeur. |
Famille de polices
La propriété font-family définit la famille de polices du texte.
La propriété font-family doit définir plusieurs noms de polices comme mécanisme de « repli ». Si le navigateur ne prend pas en charge la première police, il essaiera la suivante.
RemarqueSi le nom d'une famille de polices comporte plus d'un mot, il doit être placé entre guillemets, comme font-family: "SimSun".
Plusieurs familles de polices sont spécifiées, séparées par des virgules :
Pour les combinaisons de polices plus couramment utilisées, consultez notreCombinaisons de polices web safe。
Style de police
La propriété font-style est principalement utilisée pour spécifier du texte en italique.
Cette propriété a trois valeurs :
- Normal - affiche le texte normalement
- Italique - affiche le texte en italique
- Texte oblique - le texte penche d'un côté (très similaire à l'italique, mais moins pris en charge)
Exemple
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Essayez-le vous-même »
Taille de police
La propriété font-size définit la taille du texte.
Pouvoir contrôler la taille du texte est très important en conception web. Cependant, vous ne pouvez pas faire ressembler des paragraphes à des titres, ou des titres à des paragraphes, en ajustant la taille de police.
Veuillez vous assurer d'utiliser les balises HTML correctes, telles que <h1> - <h6> pour les titres et <p> pour les paragraphes :
Les valeurs de taille de police peuvent être absolues ou relatives.
Taille absolue :
- Définir le texte à une taille spécifiée
- Ne permet pas aux utilisateurs de modifier la taille du texte dans tous les navigateurs.
- La taille absolue est utile lorsque la taille physique de la sortie est connue.
Taille relative :
- Définir la taille par rapport aux éléments environnants
- Permet aux utilisateurs de modifier la taille du texte dans le navigateur.
Si vous ne spécifiez pas de taille de police, la taille par défaut est la même que celle des paragraphes de texte normaux : 16 pixels (16px = 1em).
Définir la taille de police en pixels
Définir la taille du texte en pixels vous donne un contrôle total sur la taille du texte :
L'exemple ci-dessus peut ajuster la taille du texte en zoomant dans le navigateur avec Internet Explorer 9, Firefox, Chrome, Opera et Safari.
Bien que la taille du texte puisse être ajustée avec l'outil de zoom du navigateur, cet ajustement concerne toute la page, et non uniquement le texte.
Définir la taille de police avec em
Pour éviter le problème d'un texte non ajustable dans Internet Explorer, de nombreux développeurs utilisent l'unité em au lieu des pixels.
L'unité de taille em est recommandée par le W3C.
1em est égal à la taille de police actuelle. La taille de texte par défaut dans un navigateur est de 16px.
Par conséquent, la taille par défaut de 1em est de 16px. Vous pouvez convertir des pixels en em à l'aide de la formule suivante :px/16=em
Exemple
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 la même que celle en pixels de l'exemple précédent. Toutefois, si vous utilisez l'unité em, la taille du texte peut être ajustée dans tous les navigateurs.
Malheureusement, le problème persiste avec les navigateurs IE. Lorsque la taille du texte est ajustée, elle devient plus grande ou plus petite que la taille normale.
Utilisation de combinaisons de pourcentage et d'EM
La solution pour tous les navigateurs consiste à définir la taille de police par défaut de l'élément <body> en pourcentage :
Exemple
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
Essayez-le vous-même »
Notre code est très efficace. Il peut afficher le même rendu dans tous les navigateurs et permet à tous les navigateurs de zoomer la taille du texte.
Plus d’exemples
Définir la police en gras
Cet exemple montre comment définir la graisse du texte.
Vous pouvez définir la transformation de la police
Cet exemple montre comment définir la variante de police.
Toutes les propriétés de police en une seule déclaration
Cet exemple montre comment utiliser la propriété raccourcie pour définir toutes les propriétés de police dans une seule déclaration.
Toutes les propriétés de police CSS
| Propriété | Description |
|---|---|
| font | Définir toutes les propriétés de police dans une seule déclaration. |
| font-family | Spécifie la famille de police du texte |
| font-size | Spécifie la taille de police du texte |
| font-style | Spécifie le style de police du texte |
| font-variant | Affiche le texte en petites capitales ou en police normale. |
| font-weight | Spécifie la graisse de la police. |