Fonte

6

Plusieurs propriétés CSS permettent de contrôler l'apparence d'un texte. Voici quelques-unes des propriétés les plus courantes.

font-family

La propriété font-family permet de spécifier la police de caractères pour afficher du texte dans un élément.

Cette propriété accepte le nom d'une police:

font-family: Helvetica;

Ou encore une liste de polices:

font-family: Helvetica, Arial, sans-serif;

Cette dernière possibilité présente deux avantages:

  1. Fournir une police de substitution si une police est indisponible. Par exemple, les appareils Windows n'ayant pas la fonte Helvetica par défaut, ces appareils utiliseront la prochaine police dans la liste compatible, soit Arial.
  2. Si un caractère est manquant dans la police ("é", "ë", "ç", etc.) le navigateur utilisera un caractère de la prochaine police afin de le remplacer.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de font-family.

font-weight

La propriété font-weight permet de définir la graisse d'un texte.

Par exemple:

font-weight: bold;

Plusieurs graisses sont généralement disponibles. Ces graisses peuvent être spécifiées via leur valeur numérique ou encore leur nom.

Numérique Nom
100 thin
200 extra light
300 light
400 normal
500 medium
600 semi-bold
700 bold
800 extra bold
900 black

Par défaut, si aucune graisse n'est spécifiée, le texte est en normal (400). Il est aussi possible de spécifier au texte d'être légèrement plus fin que sont texte courant grâce au mot-clé lighter ou encore plus gras, grâce à bolder.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDM à propos de font-weight.

font-size

La propriété font-size permet de définir la taille du texte. Bien que l'unité la plus courante soit les pixels, toutes les unités de mesure sont acceptées.

font-size: 16px;

Par défaut, si aucune taille n'est spécifiée, la majorité des navigateurs lui attribueront la taille de 16px. Il est aussi possible de spécifier à un texte d'être légèrement plus petite que sont texte courant grâce au mot-clé smaller ou encore plus gros, grâce à larger.

Bien que les px soient très répandus, il ne faut pas sous-estimer les avantages offerts par les rem et em.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de font-size.

line-height

La propriété line-height indique la hauteur de chacune des lignes de texte. Bien que cette propriété accepte les valeurs en pixel, la valeur la plus répandue et la plus polyvalente consiste en un ratio basé sur la taille du texte.

Par exemple:

line-height: 1.5;

Définit une hauteur de ligne de 24px si la taille de texte est de 16px, puisque: 16px * 1.5 = 24px.

Généralement, un line-height de base est définie sur la balise <body>. Ainsi il affecte tous les éléments de la page.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir, voir cet article MDN à propos de line-height.

font-style

La propriété font-style permet de définir si un texte devrait apparaitre en italique ou non, grâce aux valeurs:

  • normal (par défaut)
  • italic

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de font-style.

color

La propriété color permet de définir la couleur du texte. Cette propriété accepte toutes les unités de couleur.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de color.

text-align

La propriété texte-align, comme son nom l'indique, sert à déterminer l'alignement horizontal du texte. Différentes options sont disponibles:

  • left (par défaut)
  • right
  • center
  • justify

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de text-align.

text-decoration

La propriété text-decoration est une propriété raccourcie permettant d'ajouter ou de retirer une ligne à un texte. Par exemple, les navigateurs utilisent cette propriété afin de différencier les liens des textes normaux en les soulignant.

Cette propriété accepte plusieurs arguments, tel que le type de ligne, sa couleur et son style.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de text-decoration.

text-transform

La propriété text-transform permet de modifier un texte. Cette propriété accepte diverses valeurs:

  • none n'a aucun impact (par défaut).
  • lowercase transforme le texte en minuscules.
  • uppercase transforme le texte en majuscules.
  • capitalize transform en majuscule la première lettre de chaque mot.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de text-transform.

text-stroke

La propriété -webkit-text-stroke bien que non standard, d'où sont préfix -webkit, est supportée par tous les navigateurs majeurs. Cette propriété accepte deux valeurs. L'épaisseur du trait entourant le le texte et la couleur du trait en question.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de text-stroke.

text-shadow

La propriété text-shadow permet d'ajouter une ombre à un texte. Cette propriété nécessite un décalage sur les X ou Y afin d'être visible par défaut. Une 3e valeur peut être ajoutée afin de spécifier le niveau de flou souhaité pour l'ombre. Finalement, une 4e valeur permet d'indiquer la couleur de l'ombre qui par défaut est de la même couleur que le texte.

Il est possible d'ajouter plusieurs ombres à un même texte si désiré.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de text-shadow.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme