HTML - Polices

Les polices jouent un rôle très important pour rendre un site Web plus convivial et augmenter la lisibilité du contenu. La face et la couleur de la police dépendent entièrement de l'ordinateur et du navigateur utilisés pour afficher votre page, mais vous pouvez utiliser HTML<font>pour ajouter du style, de la taille et de la couleur au texte de votre site Web. Vous pouvez utiliser un<basefont> pour définir tout votre texte sur la même taille, le même visage et la même couleur.

La balise de police a trois attributs appelés size, color, et facepour personnaliser vos polices. Pour modifier l'un des attributs de police à tout moment dans votre page Web, utilisez simplement la balise <font>. Le texte qui suit restera modifié jusqu'à ce que vous fermiez avec la balise </font>. Vous pouvez modifier un ou tous les attributs de police dans une seule balise <font>.

Note−Les balises font et basefont sont obsolètes et sont supposées être supprimées dans une future version de HTML. Donc, ils ne devraient pas être utilisés à la place, il est suggéré d'utiliser des styles CSS pour manipuler vos polices. Mais toujours à des fins d'apprentissage, ce chapitre explique en détail les balises de police et de base.

Définir la taille de la police

Vous pouvez définir la taille de la police du contenu en utilisant sizeattribut. La plage de valeurs acceptées va de 1 (la plus petite) à 7 (la plus grande). La taille par défaut d'une police est de 3.

Exemple

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>

Cela produira le résultat suivant -

Taille de police relative

Vous pouvez spécifier le nombre de tailles supérieures ou inférieures à la taille de police prédéfinie. Vous pouvez le spécifier comme<font size = "+n"> ou <font size = "−n">

Exemple

<!DOCTYPE html>
<html>

   <head>
      <title>Relative Font Size</title>
   </head>

   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>

</html>

Cela produira le résultat suivant -

Définition de la face de la police

Vous pouvez définir le visage de la police à l'aide de l' attribut face, mais sachez que si l'utilisateur qui consulte la page n'a pas installé la police, il ne pourra pas la voir. Au lieu de cela, l'utilisateur verra la police par défaut applicable à l'ordinateur de l'utilisateur.

Exemple

<!DOCTYPE html>
<html>

   <head>
      <title>Font Face</title>
   </head>

   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

</html>

Cela produira le résultat suivant -

Spécifier des faces de police alternatives

Un visiteur ne pourra voir votre police que si cette police est installée sur son ordinateur. Ainsi, il est possible de spécifier deux ou plusieurs alternatives de polices en listant les noms de polices, séparés par une virgule.

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

Lorsque votre page est chargée, leur navigateur affichera la première police disponible. Si aucune des polices indiquées n'est installée, il affichera la police par défaut Times New Roman .

Note - Consultez une liste complète des HTML Standard Fonts.

Définition de la couleur de la police

Vous pouvez définir n'importe quelle couleur de police que vous aimez à l'aide de l' attribut de couleur . Vous pouvez spécifier la couleur souhaitée par le nom de la couleur ou le code hexadécimal de cette couleur.

Note - Vous pouvez consulter une liste complète des HTML Color Name with Codes.

Exemple

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Color</title>
   </head>
	
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
	
</html>

Cela produira le résultat suivant -

L'élément <basefont>

L'élément <basefont> est censé définir une taille de police, une couleur et une police par défaut pour toutes les parties du document qui ne sont pas autrement contenues dans une balise <font>. Vous pouvez utiliser les éléments <font> pour remplacer les paramètres <basefont>.

La balise <basefont> prend également les attributs de couleur, de taille et de visage et prend en charge le réglage de la police relative en donnant à la taille une valeur de +1 pour une taille plus grande ou -2 pour deux tailles plus petites.

Exemple

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Basefont Color</title>
   </head>
	
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
	
</html>

Cela produira le résultat suivant -