Font, les propriétés.

font

Les propriétés des polices sont: font-family; font-style; font-size; line-height; font-weight; font-variant; font-stretch. Toutes ces propriétés peuvent être utilisées via le raccourcis 'font'.

font-family: "Nom Police", serif | sans serif;  

font-style: normal | italic; 

font-size: sa taille en 'em' ou 'rem' ou autre;

font-weight: lighter | normal | bold | bolder ou une valeur numérique de 100 à 900 
				 par tranche de 100; 
				 
font-variant: normal | small-caps;

font-stretch: normal | wider | narrower | ultra-condensed| extra-condensed | condensed
				  semi-condenced | expanded | extra-expanded | ultra-expanded;
									

Quand 'font' est utilisée en raccourcie, elle devra inclure deux valeurs: 'font-size' et 'font-family', les autres valeurs étant optionnelles. Attention cependant à l'ordre de déclaration des valeurs ! 'font-style', 'font-variant' et 'font-weight' doivent précéder la valeur 'font-size'. 'line-height' doit suivre la valeur 'font-size' séparée par '/'. Et 'font-family' doit être la dernière valeur donnée. Si le nom de la police contient des espaces, la mettre entre des doubles guillemets. On pourrait aussi utiliser des guillemets simples mais c'est juste par convention, les simples sont mis dans des doubles. En résumé:

font {
font-size | font-family
}

font {
font-style | font-variant | font-weight | font-size | line-height | font-family
}
									

'font' peut être aussi définie avec un seul mot clé qui sélectionnera la police système à utiliser.

font {
caption | icon | menu | message-box | small-caption | status-bar
}
									

line-height

Sur les éléments de type bloc, 'line-height' indique le hauteur minimale des lignes dans l'élément. Sur les éléments de type en ligne, elle indique la hauteur utilisée pour calculer le hauteur d'une boite en ligne. Elle peut prendre pour valeur un mot clé, un nombre, une longueur ou un pourcentage. Si un nombre est utilisé sans unité, il représente le facteur multiplicateur de la taille de la police appliqué à l'élément.

line-height: mot clé | normal

line-height: 1.5 /* coef multiplicateur */

line-height: em

line-height: xx%
									

Utiliser un nombre sans unité est la méthode à priviligier pour définir 'line-height' ce qui évite les effets de l'héritage. Utiliser des valeurs en 'em' peut donner des résultats inattendus tout comme avec les pourcentage. Pour utiliser 'line-height', il faut impérativement que la propriété 'font' possède une valeur pour 'font-family'.

/* toutes les règles donne le même résultat */

p { line-height: 1.2;   font-size: 10pt }  
 
p { line-height: 1.2em; font-size: 10pt }   

p { line-height: 120%;  font-size: 10pt }   

p { font: 10pt/1.2  verdana, sans-serif }

p {
font: 12px/14px sans-serif;
/* définit une taille de police à 12px, une hauteur de ligne à 14px
et une famille de police sans-serif*/
}

									

Il est nécessaire d'utiliser une valeur minimale de 1.5 pour la propriété line-height lorsqu'on l'applique sur le contenu des paragraphes principaux. Cela aidera les personnes ayant du mal à lire et les personnes dyslexiques. Utiliser une valeur sans unité permet de garantir une mise à l'échelle proportionnelle lorsqu'on zoome/dézoome. Il est d'usage de définir la 'font' dans un 'div' puis d'utiliser une classe pour les éléments comme suit:

.boite {
width: 20em;
font-size: 15px | 0.9em;
vertical-align: top;
}

.rouge {
line-height: 1.5;
border: solid red;
}
									

A appronfondir !!!


Autres propriétés de texte.

texte-decoration

Cette propriété permet d'ajouter une ligne sur, sous ou en traver du d'un texte. il est aussi possible de cumuler deux valeurs pour encadrer un texte avec une ligne au dessous et en dessus comme suit: text-decoration: underline overline; Cette propriété est le raccourcis de 'text-decoration-line' (position de la ligne), 'text-decoration-color' (sa couleur) et 'text-decoration-style' (sa forme). L'ordre des valeurs n'a pas d'importance. Attention ! Aucun support sous IE.

.class {
underline | overline | line-trough 
solid | double | dashed | dotted | wavy
color
}
									

Par contre, les styles du parent sont hérités sur les éléments descendants et les styles ne peuvent pas être désactivés, même en lui mettant une valeur 'text-decoration: none;'. Par contre les styles se cumulent entre les descendants.


text-align

Permet d'aligner du texte.

.class {
left | right | center | justify | justify-all | start | end | match-parent
}
									

'start' a le même effet que la valeur left si la direction du texte va de gauche à droite ou le même effet que right si la direction du texte va de droite à gauche..

'end' a le même effet que la valeur right si la direction du texte va de gauche à droite ou le même effet que left si la direction du texte va de droite à gauche.

'justify-all' analogue à justify mais avec la dernière ligne nécessairement justifiée.

'match-parent' semblable à inherit mais les valeurs start et end sont calculées selon la valeur de direction pour le parent et sont remplacées par left ou right selon ce qui est adéquat.

Attention ! Ces quatre valeurs sont en version de travail et n'ont pour le moment aucun support !!

text-justify

Permet de choisir le type de justicication à appliquer au texte quand un élément à une déclaration: 'text-align: justify;'. Quatre mots clés peuvent être déclarés:

auto | inter-character | inter-word | none

/* exemple */
p {
text-align: justify;
text-justify: auto;
}
									

'none' désactive 'justify' de 'text-align' et remet en forme le paragraphe avec la valeur par défaut.

'auto', valeur par défaut de 'justify' dans 'text-align'.

'inter-word' Le texte est justifié par l'ajout d'un espace entre les mots (en faisant varier l'espacement des mots), ce qui est le plus approprié pour les langues qui séparent les mots à l'aide d'espaces, comme l'anglais ou le coréen.

'inter-character', Le texte est justifié par l'ajout d'un espace entre les caractères (qui fait varier l'espacement des lettres), ce qui est plus approprié pour des langues comme le japonais.

Actuellement, Safari, android et Samsung ne supportent pas cette propriété !


Propriétés connexes.

vertical-align

Comme cette propriété est souvent utilisée pour cardrer du texte entre autre, je la mets par ici bien qu'elle ne servent pas qu'au texte à proprement parler. Donc cette propriété définit l'alignement vertical du contenu d'une boite 'inline' ou d'une cellule d'un tableau. En aucun cas elle ne permet d'aligner des éléments de type block.

vertical-align: baseline | middle | sub | super | text-top | text-bottom | top | bottom  

vertical-align: 10em | 10px | 10%
									

Maintenant, voir s'il ne vaudrait pas mieux utiliser flex pour définir l'alignement des contenus...


Articles connexes:

Unités de mesures (CSS).[ GO! ]

Font et responsiv (la suite de cet article).[ GO! ]

Le tout en test ici:

Police en folie (un peu de tout).[ GO! ]


Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 10/11/2020

Tests effectués sous Firefox 61.0.1 et Midori 0.5.11