Le CSS de la valeur de la FONT expliqué dans 4 démos

Explorez la valeur from-font de text-decoration-thickness . À travers quatre cas de démonstration, cet article explique le principe de travail de cette valeur de propriété et de la compatibilité du navigateur de manière facile à comprendre.

Explication détaillée from-font

MDN définit la valeur from-font comme suit:

Cette valeur est utilisée si le fichier de police contient des informations d'épaisseur préférées. Si le fichier de police ne contient pas ces informations, le comportement revient à définir auto et le navigateur sélectionnera l'épaisseur appropriée.

Par conséquent, la valeur from-font ne prendra effet que lorsque le fichier de police définit l'épaisseur de la ligne. Sinon, le navigateur utilisera la valeur auto et le navigateur sélectionnera l'épaisseur en soi. Cet article le compare à d'autres valeurs à travers plusieurs cas de démonstration.

Demo 1: text-decoration-thickness: auto

Le premier cas de démonstration teste l'effet des valeurs auto sur les soulignements, les surfaces et les strikethroughs sous la famille de polices par défaut.

Les résultats montrent que certaines combinaisons (par exemple, le strikethrough est décoré de lignes ondulées) sont moins lisibles, mais cela peut être la sortie souhaitée dans certains scénarios.

Demo 2: text-decoration-thickness: 0px

Le deuxième cas de démonstration teste les performances des lignes fines.

Les lignes minces fonctionnent bien dans des paragraphes ou des textes plus petits, mais dans des textes plus grands, les états minces sont difficiles à identifier.

De plus, les expériences montrent que l'épaisseur de la ligne ne peut pas être inférieure à 1px. Même si elle est définie sur 0px , le navigateur se rend toujours en ligne 1px.

Demo 3: text-decoration-thickness: from-font et d'épaisseur de police

La troisième démonstration teste si text-decoration-thickness: from-font avec l'épaisseur de la police. Le côté gauche est réglé à from-font et le côté droit est réglé sur auto .

Les résultats montrent qu'au moins lors de l'utilisation de la famille des polices roboto, from-font ne semble pas changer avec l'épaisseur de la police de texte. Les modifications de la taille du texte ou de l'épaisseur n'affecteront pas l'épaisseur de la ligne.

Il convient de noter que le navigateur Firefox rend l'épaisseur de la ligne de ces deux valeurs, ce qui implique que le navigateur Firefox peut réellement utiliser from-font sous auto .

Demo 4: text-decoration-thickness: from-font et Font Family

Le dernier cas de démonstration teste comment from-font se produit sous différentes familles de polices. Étant donné que le minimum de rendu est de 1px, l'effet sur les paragraphes ou la taille de la police plus petite n'est pas évident. Uniquement dans des tailles de police plus grandes (par exemple, par défaut<p> Dans l'élément), la différence est plus subtile et nécessite une observation minutieuse pour découvrir. Encore une fois, la ligne de suppression est encore trop mince dans un texte plus grand. Les concepteurs de polices et les développeurs peuvent avoir besoin de considérer cela lors de la conception et de la définition des polices.</p> <h3> Support de navigateur</h3> <p> La plupart des navigateurs modernes prennent en charge <code>text-decoration-thickness .

Doit from-font ?

Bien que la valeur from-font semble être une bonne idée, je ne pense pas qu'elle devrait encore être utilisée. Différents navigateurs ont de nombreuses incohérences pour rendre la valeur par défaut text-decoration-thickness , de sorte que les performances actuelles de from-font n'est pas idéale. Peut-être que la valeur from-font devrait être définie à l'aide de pourcentages ou d'autres unités relatives afin qu'elle change avec la taille de la police. Ou des concepteurs de polices pensent que cela ne devrait pas fonctionner de cette façon. Dans tous les cas, il semble que davantage de discussions soient nécessaires pour déterminer le comportement par défaut de la valeur de la propriété et comment il le rend.

J'ai utilisé la valeur from-font dans le lien de l'article souligné à mon site Web personnel et je pense que cela fonctionne très bien. Les lignes sont subtiles, mais transmettent toujours le message interactif.

Dans l'attente du futur attribut text-decoration-thickness avec plus d'options.

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!