La valeur par défaut de Firefox est un problème pour les polices variables

Les polices variables simplifient la création de divers styles de police à partir d'un seul fichier. Cependant, le rendu actuel du navigateur de<strong></strong> et<b></b> Les éléments présentent des défis de compatibilité avec la large gamme de valeurs de poids de police offertes par les polices variables.

Dispances du navigateur dans le poids de police par défaut

<strong></strong> et<b></b> Les éléments mettent en évidence le texte. Les navigateurs y parviennent en augmentant le poids de police. Cela fonctionne bien en général. Par exemple, MDN Web Docs utilise<strong></strong> Dans son "trouvé un problème?" section.

Le problème se pose avec les poids de police personnalisés. Alors que la valeur par défaut est de 400, font-weight accepte les valeurs de 1 à 1000. CHROME ET FIREFOX Rendu<strong></strong> différemment en fonction du poids de police du texte environnant.

Chrome et Safari utilisent systématiquement un poids de police de 700, tandis que Firefox utilise 400, 700 ou 900, selon le contexte.

La source de l'écart

Chrome et Firefox utilisent différentes valeurs font-weight dans leurs feuilles de styles d'agent utilisateur:

 <code>/* Chrome and Safari */ strong, b { font-weight: bold; } /* Firefox */ strong, b { font-weight: bolder; }</code>

bold équivaut à 700, tandis que bolder est relatif. La norme HTML, cependant, recommande bolder (depuis 2012), une recommandation actuellement suivie uniquement de Firefox. La feuille de style normalisée populaire aborde cette incohérence.

Évaluer les valeurs par défaut

Le défaut de Firefox s'aligne sur la norme. Mais est-ce supérieur? Les deux valeurs par défaut ont des défauts: bold de Chrome échoue à des poids de police plus élevés (environ 700), tandis que les luttes bolder de Firefox avec des poids plus bas (environ 300).

Dans le pire des cas de Firefox,<strong></strong> Le texte devient presque invisible. L'image ci-dessous montre du texte avec un poids de police de 349 dans Firefox. Pouvez-vous repérer le mot à l'intérieur<strong></strong> Tags? Firefox le rend à 400, une augmentation de 51 points.

Conclusion

Lorsque vous utilisez des polices minces ou variables en dessous de 350 poids de police,<strong></strong> et<b></b> pourrait être indistinct dans Firefox. La définition manuelle font-weight pour ces éléments est conseillé d'éviter de s'appuyer sur le défaut sous-optimal du navigateur.

 <code>/* Example: Defining regular and bold font-weights */ body { font-weight: 340; } b, strong { font-weight: 620; }</code>

bolder est problématique avec des polices variables. Idéalement, le texte mis en valeur doit être facilement visible quel que soit le poids du texte environnant. Une augmentation cohérente de poids de police (par exemple, un pourcentage) serait préférable. Le groupe de travail CSS discute des valeurs en pourcentage basées sur font-weight , comme suggéré par Lea Verou:

 <code>/* Proposed percentage-based font-weight */ strong, b { font-weight: 150%; }</code>

Une augmentation de 150% pourrait être une meilleure valeur par défaut que l'approche bold / bolder actuelle pour les polices variables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!