Famille de police

propriétés gérées:
color, font-family, font-size, font-stretch, font-style, font-variant, font-weight, letter-spacing, line-height, text-align, text-decoration, text-indent, text-shadow, text-transform, vertical-align, white-space, word-spacing

Si la liste des Polices ne correspond pas à ce qui est installé sur votre ordinateur, cliquez l'icone rouge « plugin » plugin icon en haut à droite de l'éditeur pour la mettre à jour.

Bouton Police font family

Sélectionnez dans la liste des polices une ou plusieurs familles et cliquez sur le bouton Ajouter.
Le bouton Supprimer permet de retirer une police.
Les doubles flêches déplacer sélecteur permettent de changer l'ordre des polices chargées dans la liste.
Le menu local « type » permet d'associer une police équivalente à celles que vous avez définies lorsqu'elles n'existent pas sur l'ordinateur client.

Texte et aspect de la Police

Zone de texte Zone de texte

Texte

font-size (taille de police)

Entrer directement la valeur dans le champs :

  • Valeur par mots-clés : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller .
  • Longueur ou un pourcentage. Si vous entrez un nombre (entier ou avec virgule), l'unité de longueur par défaut est px. Les unités possibles sont : px = nombre de pixels (unité par défaut), % = pourcentage, cm = centimètre, mm = millimètre, pt = point, em = valeur de font-size, ex = valeur de x-height, in = inch, pc = pica.
  • Champs vide ou =défaut signifie «pas de valeur».

Utilisez de préférence une valeur relative, plutôt qu'une valeur absolue.

Color (couleur de police)

Cliquez le bouton color pour accéder aux sélecteur de couleurs ou entrez directement une valeur dans le champs de saisie. Voir saisie des couleurs.

text-align (alignement horizontal)

left, right, center et justify : respectivement, à gauche, à droite, centré et justifié.

Lorem ipsum, quia dolor sit, amet, consecteturLorem ipsum, quia dolor sit, amet, consecteturLorem ipsum, quia dolor sit, amet, consecteturLorem ipsum, quia dolor sit, amet, consectetur

vertical-align (alignement vertical)

Positionne verticalement le texte à l'intérieur de la boîte. Cette propriété agit seulement sur un élément de type en-ligne ou table; elle est inopérante autrement.

topmiddlebottom

Mise en forme du texte

text-indent (retrait ou alinéa)

Décalage horizontal de la première ligne du bloc de texte par rapport au bloc. Exprimé sous la forme d'une longueur ou d'un pourcentage, positif pour un retrait intérieur ou négatif pour un retrait extérieur (à l'américaine).

Aucun décalage horizontal Retrait de la première ligne de 1em Retrait extérieur de la première ligne de -1em

line-height (interligne)

Coefficient appliqué à la hauteur totale des caractères : 110% ou 1.1 par exemple.

texte avec interligne normaltexte avec interligne de 1.8

letter-spacing (crénage des caractères)

Espacement entre les caractères du texte.

Exemple de letter-spacing de 5px.

Exemple de letter-spacing de -1px.

word-spacing (espacement des mots)

Taille de l'espace entre chaque mot.

Exemple de word-spacing de 20px.

white-space (césure des mots)

Mode de traitement des espaces entre mots (retour à la ligne ou pas).

Exemple de white-space normal. Exemple de white-space nowrap.

Effacer réinitialiser les réglages de styles

Cliquez ce bouton pour effacer les réglages présents.

Police

font-style (inclinaison des caractères)

  • normal : police normale.
  • oblique : police oblique ;
  • italic : police italique.

font-weight (graisse)

Spécifie la graisse de la police.
Valeurs :   normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-stretch (étirement de police)

Sélectionne les dessins normal, comprimé ou élargi dans une famille de polices.
Valeurs :  ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded

text-decoration

  • Défaut : annule les réglages précédemment réalisés,
  • none : aucune décoration.
  • valeur : donne accès à 4 cases à cocher indépendantes :
underline : texte soulignéoverline : texte surlignéline-through : texte barréblink : texte clignotant

font-variant (variante de police)

  • normal : texte normal.
  • small-caps : texte en petites capitales.

text-transform (casse de caractères)

  • capitalize : La première lettre de chaque mot est en majuscule.
  • uppercase : Le texte est en majuscules.
  • lowercase : Le texte est en minuscules.
  • none : Aucun effet de capitalisation.

text-shadow (ombrage de texte)

Cliquez le bouton color pour accéder au dialogue de saisie.

Propriété CSS2.1 disponible sur tous les navigateurs récents.

4 éléments facultatifs :

  • décalage horizontal de l'ombre par rapport au texte
  • décalage vertical
  • niveau de flou (au delà de 3px, c'est trop flou !)
  • couleur de l'ombre

Entrez les valeurs dans les champs ou utilisez les contrôles :

  • « main » pour décaler l'ombre,
  • scrollbar pour le niveau de flou,
  • sélecteur de couleurs pour l'ombre.

Exemple de text-shadow:5px 5px 0.7px #999999.

Cliquez le bouton Aucune pour supprimer une ombre préalablement saisie.