Le parser XML En PHP
Définition et utilisation da la propriété css font-feature-settings
La propriété CSS font-feature-settings permet de spécifier les caractéristiques de police à utiliser pour un élément. Elle permet de personnaliser les détails typographiques tels que les ligatures, les alternatives de caractères et les chiffres de type.Grâce à font-feature-settings, vous pouvez facilement améliorer l'apparence de votre texte en utilisant des caractéristiques de police spécifiques pour un élément. Par exemple, vous pouvez utiliser des ligatures pour unir deux lettres afin de créer une forme plus esthétique, ou utiliser des alternatives de caractères pour remplacer un caractère standard par une version plus originale.
Cette propriété est particulièrement utile lorsque vous utilisez des polices de caractères avancées qui offrent de nombreuses caractéristiques typographiques. En utilisant font-feature-settings, vous pouvez accéder à ces caractéristiques et les utiliser pour créer un texte plus original et plus attrayant.
Pour utiliser font-feature-settings, vous devez d'abord spécifier la caractéristique de police que vous souhaitez utiliser. Vous pouvez utiliser les codes de caractéristiques standard, ou vous pouvez utiliser des termes plus simples comme "liga" pour les ligatures ou "pnum" pour les chiffres de type. Vous pouvez également utiliser la valeur "normal" pour désactiver une caractéristique de police.
La Syntaxe CSS font-feature-settings
font-feature-settings: normal|feature-value;
| Valeurs par défaut | normal |
|---|---|
| Inherited: | oui |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.fontFeatureSettings="normal" |
Prise en charge de la propriété cssfont-feature-settings dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 48 16 -webkit- | 10 | 34 15 -moz- | 9.1 | 35 15 -webkit- |
Valeurs de la propriété font-feature-settings
normal : Par défaut. Utilisez les paramètres par défaut pour mettre en page le textefeature-value : Format : string [1|0|on|off] Toujours une chaîne de 4 caractères ASCII.
Liste de toutes les valeurs prises en charge par font-feature-settings
Voici une liste de toutes les valeurs prises en charge par font-feature-settings, mais assurez-vous de vérifier que la police Web que vous utilisez prend également en charge ces valeurs avant de les essayer :liga : ligatures standard
dlig : ligatures discrétionnaires
onum : chiffres de style ancien
lnum : chiffres en ligne
tnum : chiffres tabulaires
zero : zéro barré
frac : fractions
sups : exposant
subs : indice
smcp : petites capitales
c2sc : petites capitales à partir de capitales
case : formes sensibles à la casse
hlig : ligatures historiques
calt : alternances contextuelles
swsh : barres obliques
hist : formes historiques
ss** : ensembles stylistiques
kern : crénage
locl : formes localisées
rlig : ligatures obligatoires
medi : formes médianes
init : formes initiales
isol : formes isolées
fina : formes finales
mark : marque
mkmk : positionnement de marque à marque
Utilisation de la propriété css font-feature-settings
La propriété font-feature-settings de CSS vous permet d'ajuster la façon dont vos polices sont affichées, ce qui vous donne un meilleur contrôle sur leur apparence. Cette propriété est particulièrement utile pour contrôler le crénage, les ligatures et d'autres caractéristiques typographiques de votre texte.Pour utiliser la propriété font-feature-settings, il vous suffit de spécifier le nom de la caractéristique de la police que vous souhaitez ajuster et la valeur que vous souhaitez lui attribuer.
Par exemple, si vous souhaitez activer les ligatures dans votre texte, vous utiliserez la syntaxe suivante :
font-feature-settings : "liga" 1 ;
Dans ce cas, la valeur liga indique que vous voulez activer les ligatures, et la valeur 1 indique que vous voulez activer cette fonction. Vous pouvez utiliser une valeur de 0 pour désactiver une fonction.
Vous pouvez également spécifier plusieurs fonctions de police dans une seule propriété font-feature-settings. Par exemple, si vous souhaitez activer à la fois les ligatures et le crénage, vous utiliserez la syntaxe suivante :
font-feature-settings : "liga" 1, "kern" 1 ;
Gardez à l'esprit que toutes les polices ne prennent pas en charge toutes les fonctionnalités de police. Vous devrez donc peut-être expérimenter pour trouver la bonne combinaison de paramètres pour votre police spécifique. En outre, tous les navigateurs ne prennent pas en charge la propriété font-feature-settings. Vous devrez donc peut-être utiliser des préfixes spécifiques au fournisseur pour vous assurer que vos styles sont appliqués correctement dans tous les navigateurs.
Voici un exemple d'utilisation de la propriété font-feature-settings dans un scénario réel :
.mon-texte {
font-family : "Ma police personnalisée" ;
font-feature-settings : "liga" 1, "kern" 1 ;
}
Dans cet exemple, la classe .mon-texte utilise la propriété font-feature-settings pour activer les ligatures et le crénage pour la police "Ma police personnalisée". Vous pouvez ensuite appliquer cette classe à n'importe quel élément de votre HTML pour lui donner la typographie souhaitée.En résumé, la propriété font-feature-settings est un outil puissant pour améliorer l'apparence et la lisibilité du texte en utilisant les fonctionnalités avancées des polices OpenType. Il est facile à utiliser et peut apporter une touche personnelle à tout design de site web.
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> La propriété CSS font-feature-settings </title>
<style>
/* activer les petites capitalisations */
.ex1 { font-feature-settings: "smcp" on; }
/* convertir les majuscules et les minuscules en petites capitales */
.ex2 { font-feature-settings: "c2sc", "smcp"; }
/* pas de ligatures communes */
.ex3 { font-feature-settings: "liga" 0; }
/* activer les fractions automatiques */
.ex4 { font-feature-settings: "frac"; }
</style>
</head>
<body>
<h1>La propriété css font-feature-settings </h1>
<div class="ex1">Voici un texte avec lettres et chifres 0123.</div>
<div class="ex2">Voici un texte avec lettres et chifres 0123.</div>
<div class="ex3">Voici un texte avec lettres et chifres 0123.</div>
<div class="ex4">Voici un texte avec lettres et chifres 0123.</div>
</body>
</html>