w3docs logo

Propriété CSS font

Font est une propriété raccourcie pour les propriétés suivantes:

Vous pouvez définir toutes les propriétés dans l'ordre suivant: 1. font-style, 2. font-variant, 3. font-weight, 4. font-size / line-height, 5. font-family.

C'est requis de définir les valeurs des propriétés font-size et font-family. Si l'une des valeurs manque, ce qui est utilisée est sa valeur initial.

Valeur initiale Les valeurs initiales des propriétés.
Appliquée à Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line.
Héritée Oui.
Animable Oui. Font-size, font-weight, font-stretch, et line-height sont animables.
Version CSS1
Syntaxe DOM Object.style.font = "talic normal bold 1em/140% "Lucida Grande", sans-serif";

Syntaxe

font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .font { font: italic normal  bold 1em/140%  "Lucida Grande", sans-serif;}
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété font</h2>
    <p>C'est quelque paragraphe normal.</p>
    <p class="font">C'est un paragraphe avec une valeur de font spécifiée.</p>
  </body>
</html>

Voyons un autre exemple:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      .font1{
      font: italic small-caps bold 20px/1 cursive;
      }
      .font2{
      font: italic 1.2em "Fira Sans", serif;
      }
      .font3{
      font: 1.2em "Fira Sans", sans-serif;
      }
      .font4{
      font: small-caps bold 28px/1.5 sans-serif;
      }
      .font5{
      font: caption; /* font: menu | icon | message-box | small-caption | status-bar;*/
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété font</h2>
    <p class="font1">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
    <p class="font2">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
    <p class="font3">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
    <p class="font4">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
    <p class="font5">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
  </body>
</html>

Un autre exemple de font animation. Dans cet exemple, les propriétés font-size,font-weight, et line-height sont animables.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      .element {
      border: 2px solid #666;
      width: 350px;
      height: 150px;
      font: 20px "Fira Sans", sans-serif;
      -webkit-animation: element 4s infinite; /* Chrome, Safari, Opera */
      animation: element 4s infinite;
      }
      /* Chrome, Safari, Opera */
      @-webkit-keyframes element {
      50% {font: 50px bold;}
      }
      /* Standard syntax */
      @keyframes element {
      50% {font: 50px bold;}
      }
    </style>
  </head>
  <body>
    <h2>Exemple de font animation</h2>
    <div class="element">
      <p>Quelque paragraphe</p>
    </div>
  </body>
</html>

Valeurs

Valeur Description
font-style Définit le style de la police. Sa valeur initiale est normal.
font-variant Définit la variante de la police. Sa valeur initiale est normal.
font-weight Définit la largeur de la police. Sa valeur initiale est normal.
font-size/line-height Définit la taille de la police et la hauteur de ligne. Sa valeur initiale est normal.
font-family Définit la famille de la police. Sa valeur initiale dépend du navigateur.
caption La police qui est utilisée pour les contrôles légendes (e.g., boutons, drop-downs).
icon Police utilisée pour étiqueter les icônes.
menu Police utilisée dans les menus (e.g., menus déroulants et listes de menu).
message-box Police utilisée dans les boîtes de dialogue.
small-caption Police utilisée pour étiqueter les petits contrôles.
status-bar Police utilisée dans les barres de status de fenêtre.
initial Fait la propriété utiliser sa valeur initiale.
inherit Hérite la propriété de son élément parent.

Pratiquez vos connaissances

Qu'est-ce que vous pouvez contrôler avec la propriété CSS 'font'?
Trouvez-vous cela utile?