oujood.com

Optimiser la typographie de vos pages web avec la propriété css @font-feature-values

La propriété CSS @font-feature-values: Contrôler l'utilisation des fonctionnalités OpenType dans vos pages web
La propriété CSS @font-feature-values fait partie de la spécification CSS Fonts Module Level 3 et est supportée par la plupart des navigateurs web modernes. Elle permet aux développeurs d'activer ou de désactiver des fonctionnalités OpenType spécifiques, telles que le crénage, les ligatures, les caractères alternatifs, et plus encore.

chercher |

Définition et utilisation da la propriété css @font-feature-values

La propriété CSS @font-feature-values permet aux développeurs de contrôler l'utilisation de fonctionnalités OpenType spécifiques dans une page web. Cette propriété est utile pour les web designers qui souhaitent affiner la typographie de leurs pages web et les rendre plus attrayantes visuellement.

La propriété @font-feature-values est utilisée dans la règle @font-face et fonctionne en spécifiant le nom de la police et les valeurs des fonctionnalités OpenType spécifiques qui doivent être activées pour cette police.

La syntaxe pour la propriété @font-feature-values est la suivante :

font-feature-values: <feature-tag-value> <integer> [, <feature-tag-value> <integer> ]*;


Le paramétre <feature-tag-value> est le nom de la fonctionnalité de la police, telle que kern, liga ou pnum, et le paramétre <integer> est la valeur qui doit être attribuée à cette fonctionnalité. Une valeur de 1 indique que la fonctionnalité doit être activée, tandis qu'une valeur de 0 indique qu'elle doit être désactivée.

Par exemple, la règle @font-face suivante spécifie que la police MyFont doit avoir les fonctionnalités OpenType kern et liga activées :

Exemple       Copier le code

@font-face {
  font-family: MyFont;
  src: url('myfont.ttf') format('truetype');
  font-feature-values: "kern" 1, "liga" 1;
}

Dans cet exemple, la fonctionnalité kern est activée avec une valeur de 1, ce qui signifie que la police utilisera les données de crénage pour ajuster l'espacement entre les paires de caractères.
La fonctionnalité liga est également activée avec une valeur de 1, ce qui signifie que la police utilisera des ligatures pour remplacer les combinaisons de caractères spécifiques par des glyphes plus attrayants visuellement.

Une fois que la règle @font-face a été définie, la police peut être utilisée dans une page web en spécifiant simplement le nom de la police dans la propriété CSS font-family.
Par exemple :

Exemple       Copier le code

p {
  font-family: MyFont;
}
La propriété @font-feature-values est un outil puissant pour les web designers qui souhaitent prendre le contrôle de leur typographie web et créer des pages web plus attrayantes visuellement et plus lisibles. En activant des fonctionnalités OpenType spécifiques, les designers peuvent améliorer la lisibilité, la lisibilité et l'esthétique globale de leur contenu web.

Liste de toutes les valeurs prises en charge par font-feature-values

Voici une liste de toutes les valeurs prises en charge par @font-feature-values, 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

Prise en charge de la propriété css font-feature-values 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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion48
16 -webkit-
1034
15 -moz-
9.1 35
15 -webkit-





Voir aussi nos tutoriel :

Tutoriel jquery

Tutoriel JQuery : jQuery est une bibliothèque de JavaScript pour « écrire moins, faire plus ».

Balise strong

Définit texte important

Construction du code javascript

Construction du code javascript : Dans ce cours nous allons voir comment est costruit un code js.