Font-variation-settings - Propriété CSS
Résumé des caractéristiques de la propriété font-variation-settings
normalnormalSyntaxe de font-variation-settings (schéma).
font-variation-settings.Détails sur les valeurs.
Télécharger le schéma en SVG.
Description des termes utilisés sur le schéma (les termes en gras sont prédéfinis) :
axeest un code indiquant l'axe choisi. Il doit être inscrit entre apostrophes ou guillemets.numberest un nombre sans unité. La plage des valeurs autorisées dépend de l'axe choisi.
Description de la propriété font-variation-settings.
font-variation-settings présente de nombreux problèmes de compatibilité sur plusieurs navigateurs.
De plus son efficacité dépend de la police utilisée.
La propriété CSS font-variation-settings donne accès à des possibilités des polices TTF, OTF ou WOFF,
qui ne sont pas gérées par une propriété CSS spécifique, mais qui peuvent, dans certains cas assez rares, être utiles.
Il est bien entendu conseillé d'utiliser la propriété dédiée lorsqu'elle existe, et de réserver l'usage de font-variation-settings
aux cas très particuliers.
font-variation-settings: 'wght' 500;
/* Peut avantageusement être remplacé par */
font-weight: bold;
Voir aussi la propriété font-feature-settings.
Valeurs pour font-variation-settings.
- font-variation-settings: normal;
Aucune fonctionnalité de police n'est demandée. Cette valeur peut être utile pour désactiver une règle reçue par héritage.
- font-variation-settings: 'axe' valeur;
axeest le code de l'un des nombreux axes de Open Type Features. Par exemple, l'axe'wdth'gère la largeur des caractères, l'axe'ital'gère l'inclinaison des caractères, etc.valeurest une information complémentaire, souvent numérique. Par exemple, l'axe'wght'(gras) nécessite une valeur de100à900indiquant l'épaisseur de la graisse des caractères. - font-variation-settings: 'axe1' valeur1, 'axe2' valeur2;
Plusieurs axes avec leur valeur peuvent être spécifiés, en séparant les groupes axe-valeur par des virgules.
Si certains des axes indiqués ne sont pas pris en charge par la police de caractères utilisée, il sont tout simplement ignorés, sans que la règle dans son ensemble soit considérée comme en erreur. Autrement dit, si d'autres axes sont précisés et sont corrects, ils seront pris en compte malgré la présence des axes erronés.
- font-variation-settings: initial; (
normal) font-variation-settings: inherit; font-variation-settings: revert; font-variation-settings: revertLayer; font-variation-settings: unset;Liens vers la présentation de ces différentes valeurs :
initial,inherit,revert,revert-layer,unset.
Possibilité d'animation de la propriété font-variation-settings.
L'animation de la propriété font-variation-settings est possible à condition que les étapes successives concernent le ou les mêmes axes.
Par exemple si l'étape 1 (from) comporte une déclaration concernant l'axe wght, alors l'étape suivante devra également comporter
une déclaration sur ce même axe.
Simulateur avec la propriété font-variation-settings.
Sur la police choisie (Noto Sans), la graisse (axe 'wght') évolue sur la plage de 100 à 100,
et la largeur des caractères (axe 'wdth') de 62.5 à 100.
Support de font-variation-settings.
Peu de navigateurs prennent en charge la propriété font-variation-settings, et d'autre part, toutes les polices de caractères ne
supportent pas cette fonctionnalité.
font-variation-settingsNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Opéra
Chrome
Edge
Firefox
Chrome pour Androïd
Androïd Brower
Firefox pour Androïd
Safari
Safari sur IOS
Samsung Internet
KaiOS Browser
Opéra mini
Évolution de la propriété font-variation-settings.
-
Module CSS - Polices de caractères - Niveau 4
Ce niveau 4 de la spécification sur les polices de caractères reprend ce qui est défini dans le niveau 3. Il ajoute la possibilité de définir ce qui se passe quand une police est longue à charger ou absente. Il ajoute également le support des polices colorées et précise de nombreux points encore mal définis dans le niveau 3.
Concernantfont-variation-settings. Présentation initiale de cette propriétéfont-variation-settings.
11 Juillet 2017Document de travail.
Voir aussi, à propos des polices de caractères.
Les propriétés concernant les polices de caractères sont nombreuses. Elles sont regroupées dans le module Module CSS - Polices de caractères. Vous trouvez les définitions suivantes dans ce module :
Propriétés :
em, ex, etc.Fonctions :
Directives :
Descripteurs :
@font-face. Définit la hauteur des caractères au dessus de la ligne de base.@font-face. Définit la hauteur des caractères au dessous de la ligne de base.@font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.@font-face. Définit l'interligne de la police.@font-face. Définit la plage des codes de caractères à télécharger dans une police.