oujood.com

Les propriétés font-variant-east-asian, font-variant-ligatures, font-variant-numeric et font-variant-position : explications et exemples

Tutoriel : maîtriser les propriétés CSS font-variant-east-asian, font-variant-ligatures, font-variant-numeric et font-variant-position

chercher |

Maîtriser les propriétés font-variant pour une meilleure qualité de texte

Dans ce tutorie on va voir les propruiétés css :

- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position

La propriété CSS font-variant-east-asian

La propriété CSS font-variant-east-asian permet de définir les caractères East Asian typographiques pour un élément HTML. Cette propriété prend en compte la langue et les habitudes de typographie de l'Est de l'Asie, comme le japonais ou le chinois.

Voici comment utiliser la propriété font-variant-east-asian :

Ouvrez votre fichier HTML et ajoutez un élément à styliser. Par exemple :

Exemple       Copier le code

<p class="mon-texte">Mon texte</p>

Ouvrez votre fichier CSS et ajoutez un sélecteur pour cet élément. Par exemple :

Exemple       Copier le code

.mon-texte {
font-variant-east-asian: normal;
}

Modifiez la valeur de la propriété font-variant-east-asian selon vos besoins. Voici les valeurs possibles :

normal : utilise la valeur par défaut du navigateur pour les caractères East Asian.
jis78 : utilise les caractères JIS X 0201-1977.
jis83 : utilise les caractères JIS X 0208-1983.
jis90 : utilise les caractères JIS X 0212-1990.
jis04 : utilise les caractères JIS X 0213-2004.
simplified : utilise les caractères simplifiés chinois.
traditional : utilise les caractères traditionnels chinois.

Voici un exemple d'utilisation de la propriété font-variant-east-asian :

Exemple       Copier le code

.mon-texte {
font-variant-east-asian: jis04;
}

La propriété CSS font-variant-ligatures

La propriété CSS font-variant-ligatures permet de définir les ligatures (liaisons de lettres) pour un élément HTML. Une ligature est une combinaison de lettres qui se transforme en un seul caractère. Par exemple, la ligature "ffi" peut être remplacée par le caractère "ffi".

Voici comment utiliser la propriété font-variant-ligatures :

Ouvrez votre fichier HTML et ajoutez un élément à styliser. Par exemple :

Exemple       Copier le code

<p class="mon-texte">Mon texte</p>

Ouvrez votre fichier CSS et ajoutez un sélecteur pour cet élément. Par exemple :

Exemple       Copier le code

.mon-texte {
font-variant-ligatures: normal;
}

Modifiez la valeur de la propriété font-variant-ligatures selon vos besoins. Voici les valeurs possibles :

normal : utilise les ligatures par défaut du navigateur.
none : désactive les ligatures.
common-ligatures : active les ligatures courantes (comme "ff", "fi", "fl").
no-common-ligatures : désactive les ligatures courantes.
discretionary-ligatures : active les ligatures facultatives (comme "ffi", "ffl", "fft").
no-discretionary-ligatures : désactive les ligatures facultatives.
historical-ligatures : active les ligatures historiques (comme "ct", "sp", "st").
no-historical-ligatures : désactive les ligatures historiques.
contextual : active les ligatures contextuelles (selon le contexte dans lequel elles apparaissent).
no-contextual : désactive les ligatures contextuelles.
Voici un exemple d'utilisation de la propriété font-variant-ligatures :

Exemple       Copier le code

.mon-texte {
font-variant-ligatures: discretionary-ligatures;
}

La propriété CSS font-variant-numeric

La propriété CSS font-variant-numeric permet de définir les chiffres pour un élément HTML. Cette propriété permet de choisir entre des chiffres normaux et des chiffres alternatifs (par exemple, des chiffres romains ou des chiffres en forme de lettres).

Voici comment utiliser la propriété font-variant-numeric :

Ouvrez votre fichier HTML et ajoutez un élément à styliser. Par exemple :

Exemple       Copier le code

<p class="mon-texte">Mon texte</p>

Ouvrez votre fichier CSS et ajoutez un sélecteur pour cet élément. Par exemple :

Exemple       Copier le code

.mon-texte {
font-variant-numeric: normal;
}

Modifiez la valeur de la propriété font-variant-numeric selon vos besoins. Voici les valeurs possibles :

normal : utilise les chiffres par défaut du navigateur.
lining-nums : utilise des chiffres alignés avec le texte.
oldstyle-nums : utilise des chiffres en forme de lettres (comme dans les manuscrits).
proportional-nums : utilise des chiffres proportionnels (chaque chiffre a sa propre largeur).
tabular-nums : utilise des chiffres alignés sur une grille (chaque chiffre a la même largeur).
diagonal-fractions : utilise des fractions diagonales (comme "1/2" ou "3/4").
stacked-fractions : utilise des fractions empilées (comme "1 2/3" ou "4 5/6").

Voici un exemple d'utilisation de la propriété font-variant-numeric :

Exemple       Copier le code

.mon-texte {
font-variant-numeric: diagonal-fractions;
}

La propriété CSS font-variant-position

La propriété CSS font-variant-position permet de définir la position des lettres pour un élément HTML. Cette propriété permet de choisir entre des lettres normales et des lettres supérieures ou inférieures (comme dans les titres ou les fractions).

Voici comment utiliser la propriété font-variant-position :

Ouvrez votre fichier HTML et ajoutez un élément à styliser. Par exemple :

Exemple       Copier le code

<p class="mon-texte">Mon texte</p>

Ouvrez votre fichier CSS et ajoutez un sélecteur pour cet élément. Par exemple :

Exemple       Copier le code

.mon-texte {
font-variant-position: normal;
}

Modifiez la valeur de la propriété font-variant-position selon vos besoins. Voici les valeurs possibles :

normal : utilise les lettres par défaut du navigateur. subscript : utilise des lettres inférieures (comme dans les indices). superscript : utilise des lettres supérieures (comme dans les exposants).

Voici un exemple d'utilisation de la propriété font-variant-position :br>

Exemple       Copier le code

.mon-texte {
font-variant-position: superscript;
}

En résumé, les propriétés font-variant-east-asian, font-variant-ligatures, font-variant-numeric et font-variant-position permettent de personnaliser l'affichage des caractères dans un élément HTML. Elles sont utiles pour obtenir un rendu professionnel et adapté aux différentes langues et contextes. N'hésitez pas à les combiner pour obtenir le résultat souhaité.





Voir aussi nos tutoriel :

la propriété border-radius

Un raccourci pour définir les quatre coins de la  frontière

border-right-color

Définit la couleur de la bordure droite

Alignement texte en css

La propriété CSS qui sert pour aligner du texte et contrôler ses propriétés pour les alignements : gauche, centré, droite et justifié est text-align...