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é.
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
