1. A propos de la propriété font css
La propriété font css agit sur le texte pour modifier la famille de police, la taille, écriture en gras...La propriété font css agit sur le texte via un ensemble de propriétés enfant: font-family, font-size, font-weight...
2. La propriété font-size
La propriété font-size agit sur la taille du texte, elle peut être exprimée en pixels ou en em ( avec 1em = 16px)
Exemple (font-size en pixels)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Font Property </title> <style> p { font-size: 35px; } </style> </head> <body> <p>Hello World !</p> </body> </html> |
ce qui affiche à l'exécution:
Exemple (font-size en em)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Font Property </title> <style> p { font-size: 4em; } </style> </head> <body> <p>Hello World !</p> </body> </html> ce qui affiche à l'exécution |
3. La propriété font-family
Cette propriété spécifie la famille de police d'un élément. La valeur de font-family est une liste de polices préférées, séparées par une virgule, comme dans ces exemples :
Exemple
|
1 2 3 |
p { font-family: Verdana, Arial, sans-serif, Tahoma; } |
Si l'utilisateur a la première police de la liste installée sur son ordinateur, son navigateur affichera cette police. Si ce n'est pas le cas, le navigateur essaiera d'afficher la police suivante dans la liste.
4. La propriété font-weight
La propriété font-weight de la police est la "valeur" placée sur votre police qui déterminera à quel point votre texte apparaîtra en gras ou en clair. Il existe de nombreuses "valeurs" que vous pouvez utiliser et qui offrent une grande flexibilité pour créer l'aspect gras de police qui convient le mieux à la façon dont vous souhaitez afficher votre texte.
Valeurs de la propriété font-weight
- normal: Caractères normaux. C'est la valeur par défaut.
- bold: police avec des caractères epais
- bolder: police avec des caractères plus epais
- lighter: police avec des caractères plus clairs
- initial: définit cette propriété à savaleur par défaut
- inherit: hérite cette propriété de son élément parent.
Exemple
|
1 2 |
<p style="font-weight: bold;">Texte en bold !</p> <p style="font-weight: normal;">Texte normal !</p> |
5. La propriété font-style
La propriété font-style CSS a pour rôle de spécifier le style du texte: normal, oblique ou italique.
Valeurs de la propriété font-style
- normal: le navigateur affiche un style de police normal. C'est par défaut
- italic: le navigateur affiche un style de police italique.
- oblique: le navigateur affiche un style de police oblique.
- initial: définit cette propriété à sa valeur par défaut.
- inherit: hérite cette propriété de son élément parent.
Exemple
|
1 2 |
<p style="font-style: normal;">Texte en normal !</p> <p style="font-style: italic;">Texte en italique !</p> |
6. La propriété font-variant
Lorsqu'on souhaite utiliser une police en petites majuscules, toutes les lettres minuscules sont converties en lettres majuscules. Cependant, les lettres majuscules converties apparaissent dans une taille de police plus petite que les lettres majuscules d'origine dans le texte.
La propriété font-variant spécifie si oui ou non un texte doit être affiché dans une police en petites majuscules.
Valeurs de la propriété font-variant
- normal: le navigateur affiche une police normale. C'est par défaut
- small-caps: le navigateur affiche une police en petites majuscules
- initial: définit cette propriété à sa valeur par défaut.
- inherit: hérite cette propriété de son élément parent.
Exemple
|
1 2 |
<p style="font-variant: small-caps;">Texte en small capps !</p> <p style="font-variant: normal;">Texte normal !</p> |
7. La propriété font-stretch
La propriété font-stretch permet de rendre le texte plus étroit (condensed) ou plus large (expanded).
Remarque: Certaines polices proposent des faces supplémentaires ; faces condensées et faces développées. Pour ces polices, vous pouvez utiliser la propriété font-stretch pour sélectionner une police normale, condensée ou étendue. Noter bien que cette propriété n'a aucun effet si la police sélectionnée ne propose pas de visages condensés ou agrandis !
Valeurs de la propriété font-stretch
- ultra-condensed: rend le texte aussi fin que possible
- extra-condensed: rend le texte plus étroit que condensé, mais pas aussi étroit que ultra-condensed
- condensed: rend le texte plus étroit que semi-condensed, mais pas aussi étroit que extra-condensed
- semi-condensed: rend le texte plus étroit que la normale, mais pas aussi étroit que condensed
- normal: valeur par défaut. Pas d'étirement de la police
- semi-expanded: rend le texte plus large que la normale, mais pas aussi large que expanded
- expanded: rend le texte plus large que semi-expanded, mais pas aussi large que extra-expanded
- extra-expanded: rend le texte plus large qu'expanded, mais pas aussi large qu'ultra-expanded
- ultra-expanded: rend le texte aussi large que possible.
- initial: définit cette propriété à sa valeur par défaut.
- inherit: hérite cette propriété de son élément parent.
Exemple
|
1 2 3 4 5 |
<p style="font-stretch: ultra-condensed;">Texte ultra condensed !</p> <p style="font-stretch: semi-condensed;">Texte semi condensed !</p> <p style="font-stretch: normal;">Texte normal !</p> <p style="font-stretch: expanded;">Texte expanded !</p> <p style="font-stretch: extra-expanded;">Texte extra expended !</p> |
8. La propriété font-kerning
La propriété font-kerning contrôle l'utilisation des informations de crénage stockées dans une police. Le crénage définit l'espacement des lettres. Notez bien que cette propriété n'aura aucun effet visible pour les polices qui n'incluent pas de données de crénage.
Valeurs de la propriété font-kerning
- auto : cela permet au navigateur de décider d'utiliser ou non le crénage des polices.
- normal : permet d'utiliser le crénage stocké dans la police.
- none : désactive le crénage.
Exemple
|
1 2 |
<p style="font-kerning: normal;">Texte en normal kerning !</p> <p style="font-kerning: none;">Texte en kerning désactivé !</p> |
Younes Derfoufi
CRMEF OUJDA
