Définition des propriétés de la police en CSS

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


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

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

  • La propriété font-variant est utilisée pour créer un effet small-caps.

  • La propriété font-weight permet d'augmenter ou de diminuer l'apparence d'une police.

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

  • La propriété font 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 pourrait être n'importe quel nom de famille de police.


<html>
   <head>
   </head>
   <body>
      <p style="font-family:georgia,garamond,serif;">
     Ce texte est rendu en georgia, en garamond ou par la police serif par défaut
      selon la police que vous avez sur votre système.
      </p>
   </body>
</html>
Donne le résultat suivant :

Ce texte est rendu en georgia, en garamond ou par la police serif par défaut
 selon la police que vous avez sur votre système.


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 normales, italiques et obliques.

<html>
   <head>
   </head>
   <body>
      <p style="font-style:italic;">
      Ce texte sera rendu en italique
      </p>
   </body>
</html
Donne le résultat suivant:

      Ce texte sera rendu en italique

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.

<html>
   <head>
   </head>
   <body>
      <p style="font-variant:small-caps;">
     Ce texte sera rendu sous la forme de petites majuscules
      </p>
   </body>
</html>

Donne le résultat suivant :

     Ce texte sera rendu sous la forme de petites majuscules

Définir l’épaisseur de la police : font-weight

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


<html>
   <head>
   </head>
   <body>
      <p style="font-weight:bold;"> Cette police est en gras.</p>
      <p style="font-weight:bolder;"> Cette police est plus audacieuse. </p>
      <p style="font-weight:500;"> Cette police a un poids de 500.</p>
   </body>
</html
Donne le résultat suivant :
Cette police est en gras
Cette police est plus audacieuse.
Cette police a un poids de 500.

Définir la taille de 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-petit, x-petit, petit, moyen, grand, x-large, xx-large, plus petit, plus grand, taille en pixels ou en%.


<html>
   <head>
   </head>
   <body>
      <p style="font-size:20px;"> Cette taille de police est de 20 pixels </p>
      <p style="font-size:small;"> Cette taille de police est petite </p>
      <p style="font-size:large;"> Cette taille de police est grande </p>
   </body>
</html>


Donne le résultat suivant :

Cette taille de police est de 20 pixels
Cette taille de police est petite
Cette taille de police est grande

Définir l'ajustement de la taille de police :

L'exemple suivant montre comment définir l'ajustement de la taille d'une 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;">
         Ce texte utilise une valeur font-size-adjust.
      </p>
   </body>
</html>

Donne le résultat :

Ce texte utilise une valeur font-size-adjust.


Définir l'extension de police :

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

Les valeurs possibles pourraient ê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;">
         Si cela ne semble pas fonctionner, il est probable que votre ordinateur ne   dispose pas d'une version condensée ou étendue de la police utilisée.
      </p>
   </body>
</html>
Donne le résultat suivant :

Si cela ne semble pas fonctionner, il est probable que votre ordinateur ne   dispose pas d'une version condensée ou étendue de la police utilisée.

Propriété sténographique :

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

<html>
   <head>
   </head>
   <body>
      <p style="font:italic small-caps bold 15px georgia;">
      Appliquer toutes les propriétés sur le texte à la fois.  </p>
   </body>
</html>
Donne le résultat suivant :

Appliquer toutes les propriétés sur le texte à la fois. 



Aucun commentaire

Inscription à : Articles ( Atom )
Fourni par Blogger.