Font-synthesis-weight - Propriété CSS

font-synthesis-weight

Résumé des caractéristiques de la propriété font-synthesis-weight

Description rapide
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
Statut
Problèmes de compatibilité ⚠
Utilisable sur
HTML
Valeurs prédéfinies
auto | none
Pourcentages
Ne s'applique pas.
Valeur initiale
auto
Héritée par défaut
Oui.
Type d'animation
Discrète : lors d'une animation, la propriété font-synthesis-weight passe d'une valeur à l'autre sans transition.
Ordre canonique
Single : valeur unique (l'ordre n'intervient pas).
Module W3C
Module CSS - Polices de caractères
Références (W3C)
Statut du document: WD (document de travail)

Syntaxe de font-synthesis-weight (schéma).

font-synthesis-weight - Syntax DiagramSyntax diagram of the font-synthesis-weight CSS property. auto auto none nonefont-synthesis-weight:;font-synthesis-weight:;
Schéma syntaxique de la propriété font-synthesis-weight.
Détails sur les valeurs.

Description de la propriété font-synthesis-weight.

font-synthesis-weight autorise ou non le navigateur à générer les caractères gras lorsque ceux-ci ne sont pas définis dans la police. Cependant la plupart des polices incluent au moins une variante de gras.

La synthèse des formes de caractères en gras donne parfois de mauvais résultats, en particulier avec certaines polices fantaisies ou décoratives. La qualité du rendu synthétisé est très variable d'une police à l'autre. Il est parfois préférable de désactiver la synthèse de la graisse avec font-synthesis-weight, et donc d'afficher des caractères standards, non gras. Ou alors de choisir une police comportant les caractères gras de façon native.

On peut également souhaiter désactiver la synthèse du gras sur un texte très long pour réduire les temps de calcul.

Comparaison entre gras natif et gras synthétisé
Comparaison entre gras natif de la police et gras synthétisé (simulation)


Voyez également la propriété résumée font-synthesis qui permet d'activer ou de désactiver la synthèse de façon plus générale (et qui est mieux reconnue par les navigateurs).
Et la propriété font-weight qui détermine l'épaisseur de la graisse des caractères.

Valeurs pour font-synthesis-weight.

  • font-synthesis-weight: auto;

    Le navigateur peut synthétiser les caractères gras lorsque la police choisie ne comporte pas de variante de graisse.

    Texte en gras
  • font-synthesis-weight: none;

    Le navigateur n'est pas autorisé à synthétiser les graisses de caractères manquantes dans la police.

    Texte en gras
  • font-synthesis-weight: initial; (auto) font-synthesis-weight: inherit; font-synthesis-weight: revert; font-synthesis-weight: revertLayer; font-synthesis-weight: 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-synthesis-weight.

L'animation de font-synthesis-weight est théoriquement possible, mais ne présente pas grand intérêt visuel.

Simulateur avec la propriété font-synthesis-weight.

La police choisie est volontairement dépourvue des variantes gras. Le navigateur simule ces attributs, ou pas, en fonction de la valeur donnée à la propriété font-synthesis-weight.

font-synthesis-weight :
Texte en graisse de 100 (thin)
Texte en graisse de 200 (extra light)
Texte en graisse de 300 (light)
Texte en graisse de 400 (regular)
Texte en graisse de 500 (medium)
Texte en graisse de 600 (semi-bold)
Texte en graisse de 700 (bold)
Texte en graisse de 800 (extra bold)
Texte en graisse de 900 (heavy)

Support de font-synthesis-weight.

Plus de problèmes de compatibilité avec les navigateurs récents.

Colonne 1
Support de la propriété font-synthesis-style qui autorise ou non les navigateurs à synthétiser la graisse des caractères.
1
Propriété
font-synthesis-weight
Estimation de la prise en charge globale.
92%

Navigateurs 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

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Évolution de la propriété font-synthesis-weight.

Voir aussi, à propos des polices de caractères.

La propriétés font-synthesis-weight, ainsi que toutes celles concernant les polices de caractères sont regroupées dans le module CSS Fonts Module. Vous trouvez les définitions suivantes dans ce module :

Propriétés :

font
Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
✗
font-effect
Permet d'appliquer quelques effets au texte : relief, bordure...
font-family
Sélectionne une police de caractères parmi celles qui sont disponibles ou celles qui sont téléchargées.
⚠
font-feature-settings
Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
font-kerning
Ajustement du crénage entre caractères.
⚠
font-language-override
Définit le langage à prendre en compte lors du choix des caractères.
⚠
font-optical-sizing
Optimise la forme des caractères en fonction de leur taille.
font-palette
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
font-size
Ajuste la taille des caractères, ce qui impacte aussi les units comme em, ex, etc.
font-size-adjust
Définition du coefficient d'aspect de la police.
✗
font-smooth
Définit si un algorithme de lissage doit être utilisé et lequel.
font-stretch
Modifie l'étirement ou la compression des caractères.
font-style
Sélectionne les styles italique ou oblique de la police de caractères.
font-synthesis
Autorise ou non le calcul des styles manquants dans la police de caractères.
⚠
font-synthesis-position
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
⚠
font-synthesis-small-caps
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
⚠
font-synthesis-style
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
font-variant
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
font-variant-alternates
Définit la substitution de caractères (polices OTF, WOFF).
font-variant-caps
Applique une capitalisation des caractères.
font-variant-east-asian
Typographie spécifique aux caractères chinois ou japonais.
⚠
font-variant-emoji
Choisit entre une présentation en emoji ou en texte.
font-variant-ligatures
Active ou désactive la ligature des caractères.
font-variant-numeric
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
font-variant-position
Mise en exposant ou en indice des caractères.
⚠
font-variation-settings
Donne accès aux possibilités stylistiques des polices OTF.
font-weight
Sélectionne une graisse pour les caractères.
font-width
Synonyme de font-stretch (largeur/élargissement des caractères).

Fonctions :

⚠
palette-mix()
Établit le mélange de deux palettes de couleurs issus de deux polices de caractères différentes.

Directives :

@font-face
Définit tous les paramètres d'une police de caractères téléchargeable.
⚠
@font-feature-values
Définit les variantes typographiques à utiliser.
@font-palette-values
Définit une palette de couleurs applicable ensuite à une police de caractères.

Descripteurs :

ascent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessus de la ligne de base.
descent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessous de la ligne de base.
⚠
font-display
Descripteur pour @font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.
line-gap-override
Descripteur pour @font-face. Définit l'interligne de la police.
src
Définit la source d'un fichier de police de caractères à télécharger, ou d'une image à afficher.
unicode-range
Descripteur pour @font-face. Définit la plage des codes de caractères à télécharger dans une police.