CSS - Polices

Ce chapitre vous apprend à définir les polices d'un contenu, disponibles dans un élément HTML. Vous pouvez définir les propriétés de police suivantes d'un élément -

  • le font-family La propriété est utilisée pour changer le visage d'une police.

  • le font-style propriété est utilisée pour rendre une police en italique ou en oblique.

  • le font-variant La propriété est utilisée pour créer un effet de petites majuscules.

  • le font-weight La propriété est utilisée pour augmenter ou diminuer le niveau de gras ou de luminosité d'une police.

  • le font-size La propriété est utilisée pour augmenter ou diminuer la taille d'une police.

  • le font propriété est utilisée comme raccourci pour spécifier un certain nombre d'autres propriétés de police.

Définir la famille de polices

Voici l'exemple, qui montre comment définir la famille de polices d'un élément. La valeur possible peut être n'importe quel nom de famille de polices.

<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the 
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html>

Cela produira le résultat suivant -

Définir le style de police

Voici l'exemple, qui montre comment définir le style de police d'un élément. Les valeurs possibles sont normal, italique et oblique .

<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         This text will be rendered in italic style
      </p>
   </body>
</html>

Cela produira le résultat suivant -

Définir la variante de police

L'exemple suivant montre comment définir la variante de police d'un élément. Les valeurs possibles sont normales et petites capitalisations .

<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         This text will be rendered as small caps
      </p>
   </body>
</html>

Cela produira le résultat suivant -

Définir l'épaisseur de la police

L'exemple suivant montre comment définir l'épaisseur de police d'un élément. La propriété font-weight fournit la fonctionnalité permettant de spécifier le niveau de gras d'une police. Les valeurs possibles peuvent être normal, gras, plus audacieux, plus léger, 100, 200, 300, 400, 500, 600, 700, 800, 900 .

<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         This font is bold.
      </p>
      
      <p style = "font-weight:bolder;">
         This font is bolder.
      </p>
      
      <p style = "font-weight:500;">
         This font is 500 weight.
      </p>
   </body>
</html>

Cela produira le résultat suivant -

Définir la taille de la police

L'exemple suivant montre comment définir la taille de police d'un élément. La propriété font-size est utilisée pour contrôler la taille des polices. Les valeurs possibles peuvent être xx-small, x-small, small, medium, large, x-large, xx-large, plus petite, plus grande, taille en pixels ou en% .

<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>
      
      <p style = "font-size:small;">
         This font size is small
      </p>
      
      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html>

Cela produira le résultat suivant -

Définir le réglage de la taille de la police

L'exemple suivant montre comment définir l'ajustement de la taille de la police d'un élément. Cette propriété vous permet d'ajuster la hauteur x pour rendre les polices plus lisibles. La valeur possible peut être n'importe quel nombre.

<html>
   <head>
   </head>

   <body>
      <p style = "font-size-adjust:0.61;">
         This text is using a font-size-adjust value.
      </p>
   </body>
</html>

Cela produira le résultat suivant -

Définir l'étirement de la police

L'exemple suivant montre comment définir l'étirement de la police d'un élément. Cette propriété repose sur l'ordinateur de l'utilisateur pour avoir une version développée ou condensée de la police utilisée.

Les valeurs possibles peuvent être normales, plus larges, plus étroites, ultra-condensées, extra-condensées, condensées, semi-condensées, semi-expansées, expansées, extra-expansées, ultra-expansées .

<html>
   <head>
   </head>

   <body>
      <p style = "font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer 
         doesn't have a <br>condensed or expanded version of the font being used.
      </p>
   </body>
</html>

Cela produira le résultat suivant -

Propriété sténographique

Vous pouvez utiliser la propriété font pour définir toutes les propriétés de police à la fois. Par exemple -

<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Applying all the properties on the text at once.
      </p>
   </body>
</html>

Cela produira le résultat suivant -