CSS-SIZE: un guide définitif de dimensionnement des polices

Le réglage de la taille des polices CSS semble simple, mais il est difficile de fonctionner réellement. De nombreux développeurs s'appuient sur des ajustements répétés aux attributs font-size pour réaliser des effets visuels, mais constatent que les résultats de rendu de différents navigateurs sont incohérents. Une compréhension approfondie des paramètres de taille des polices CSS entraînera deux fois le résultat avec la moitié de l'effort.

Points clés

• Les propriétés CSS font-size acceptent une variété de paramètres, y compris les valeurs absolues, relatives et de longueur. Sauf exprimé explicitement, les éléments héritent de la taille de la police de l'élément parent, ce qui est crucial pour spécifier la taille relative.
• Bien que les mots clés de taille de police absolument puissent être utilisés, leur taille exacte peut varier considérablement d'un navigateur à l'autre, de sorte que les développeurs évitent généralement cette approche approximative. Les mots clés de taille de police relative ajustent la taille de la police en fonction de la taille de l'élément parent. Vous pouvez définir la taille de la police avec des valeurs de longueur absolue, mais vous pouvez également rencontrer des problèmes, et malgré les problèmes d'accessibilité potentiels, les valeurs de pixels sont toujours les plus appropriées.
• Les développeurs croient généralement que dans la plupart des cas, l'utilisation d'unités em ou % est la meilleure solution pour traiter les polices Web, car ils s'évoluaient avec précision les uns avec les autres et prennent en charge le redimensionnement du texte du navigateur. Il est recommandé d'utiliser la taille du pourcentage de police sur les balises pour améliorer le redimensionnement du texte dans les navigateurs plus anciens.

font-size Propriétés

L'attribut

font-size peut être utilisé pour n'importe quelle balise HTML (même s'il ne contient généralement pas de contenu texte, tel que <br>). Il peut attribuer divers paramètres de valeur absolue, relative ou de longueur. L'élément héritera de l'élément parent font-size sauf si vous le remplacez. Ceci est particulièrement important lorsque vous spécifiez une taille relative.

Mots-clés de taille de police absolue

Plusieurs mots clés de taille de police absolue peuvent être utilisés. La taille de la police est déterminée par les préréglages du navigateur et l'élément n'héritera pas de la taille de l'élément parent.

• font-size: xx-small;
• font-size: x-small;
• font-size: small;
• font-size: medium;
• font-size: large;
• font-size: x-large;
• font-size: xx-large;

Bien que la plupart des navigateurs prennent en charge ces mots clés, la taille exacte variera. Ils sont un moyen assez difficile de définir des tailles de police, ce que la plupart des développeurs éviteront généralement.

Mots-clés de taille de police relative

Deux mots clés de taille de police relative peuvent être utilisés. La taille de la police est déterminée en fonction de la taille de son élément parent:

• font-size: smaller;
• font-size: larger;

Par exemple, si la taille de la police de l'élément parent est "moyenne", la valeur "plus grande" définira l'élément sur "grand". D'autres unités de police sont généralement ajustées à un coefficient d'environ 1,2, mais encore une fois, il n'y a pas de norme et les résultats du navigateur seront différents.

Longueur absolue

font-size Les attributs peuvent attribuer une longueur absolue:

• mm: mm, par exemple 10mm.
• cm: CM, par exemple 1cm (= 10 mm).
• in: pouces, par exemple 0.39in (~ = 10 mm).
• pt: livres, 1 pt est généralement supposé être de 1/72 pouce, par exemple 12pt.
• pc: La carte est 12 pt pour 1pc.
• px: pixels, par exemple 14px.

D'une manière générale, il y a des problèmes avec toutes ces unités de mesure. Les millimètres, les centimètres et les pouces sont inexacts pour les médias basés sur l'écran. Les livres et les pokers ne sont pas fiables car le système peut utiliser différents paramètres DPI. Les pixels semblent s'adapter le plus, mais il peut entraîner des problèmes d'accessibilité car le texte ne peut pas être redimensionné dans IE.

longueur relative

font-size Les attributs peuvent affecter des unités par rapport à leur taille de police de l'élément parent:

• em: 1EM est égal à la taille de la police actuelle, donc 2EM est le double de la taille.
• %: 100% équivaut à la taille de la police actuelle, donc 200% est le double de la taille.
• ex: 1Ex est égal à la hauteur de la lettre "x" dans la police actuelle.

Peu de développeurs utilisent "ex", mais il peut être utile dans certains cas où des tailles de police à grain fin sont nécessaires, comme 1EX au lieu de 0,525EM. Le pourcentage et la taille em sont équivalents, tels que 50% = 0,5EM, 100% = 1EM, 120% = 1,2EM, etc. Certains navigateurs présenteront des différences subtiles, mais c'est rarement un problème majeur. Si vous souhaitez économiser tous les octets, vous pouvez choisir la définition la plus courte, c'est-à-dire 50% plus court que 0,5EM et 1EM plus court que 100% plus court.

Taille du texte et zoom de page

C'est là que vient la complexité supplémentaire. La plupart des navigateurs permettent aux utilisateurs:

1. augmenter ou diminuer la taille du texte de base (la taille de l'image reste inchangée)
2. zoomer ou sortir de la page afin que tous les texte et graphiques changent en conséquence, ou
3. Autoriser également le redimensionnement du texte et la mise à l'échelle des pages.

Pour compliquer davantage les choses, Internet Explorer n'autorise pas les éléments de redimensionnement du texte dont la taille de la police est définie dans les pixels (PX). Si vous êtes un développeur qui est passé d'un arrière-plan typographique à la conception Web, il est dérangeant de donner aux utilisateurs beaucoup de puissance. Votre conception peut être rompue par le grossissement de l'utilisateur de 200%, mais réduisez la taille du texte à 50%. Et - non - vous ne pouvez pas l'arrêter. Vous ne devriez pas non plus l'arrêter.

CSS Recommandations de taille de police

On pense généralement que dans la plupart des cas, em ou % est la meilleure solution. Les polices Web peuvent être mises à l'échelle avec précision les unes avec les autres et prendre en charge le redimensionnement du texte du navigateur. Je recommande également d'utiliser la taille des polices en pourcentage sur la balise ; Lors du développement d'un site Web, je vous recommande également de faire les suggestions suivantes:

1. Réinitialiser la taille de la police et la mise à l'échelle des pages aux valeurs par défaut dans tous les navigateurs avant les tests (cela m'a pris au dépourvu plusieurs fois!)
2. Essayez d'utiliser des combinaisons raisonnables de taille de texte et d'échelle de page dans divers navigateurs pour vous assurer que le texte reste lisible.

La taille des polices vous a-t-elle déjà causé des problèmes? Avez-vous d'autres conseils?

FAQ de taille de police CSS (FAQ)

Quelle est la différence entre la taille absolue de la police et la taille relative de la police dans CSS?

Dans CSS, la taille de la police peut être définie en utilisant des valeurs absolues ou relatives. La valeur absolue est fixe et ne changera pas en fonction de la taille de l'élément parent. Ils sont définis dans des unités telles que des pixels (PX), des livres (PT) ou des centimètres (CM). D'un autre côté, les valeurs relatives sont dynamiques et changent en fonction de la taille de l'élément parent. Ils sont définis à l'aide d'unités telles que l'EM, le REM ou le pourcentage (%). Le choix de la taille absolue de la police et de la taille relative des polices dépend des exigences de conception et de la réactivité de la page Web.

Comment les unités EM fonctionnent-elles en taille de police CSS?

Les unités

EM sont des unités évolutives utilisées pour la taille de la police dans CSS. Il a la taille de la police par rapport à son élément parent le plus proche. Par exemple, si la taille de la police de l'élément parent est de 20px, "1EM" sera égal à 20px pour l'élément enfant de cet élément. Si la taille de la police n'est pas définie, la valeur par défaut est généralement 16px, donc "1EM" sera 16px.

Comment utiliser les unités REM pour définir la taille de la police?

L'unité REM représente "Root EM". Il est relatif à l'élément racine (HTML) plutôt qu'à l'élément parent. Cela signifie que 1Rem est égal à la taille de la police de l'élément racine. Si la taille de la police de l'élément racine est de 16px (la taille par défaut pour la plupart des navigateurs), 1REM sera égal à 16px.

Quelles sont les unités VW dans la taille de la police CSS?

Les unités VW représentent la largeur de la fenêtre. Il est relatif à la largeur de la fenêtre, où 1VW est égal à 1% de la largeur de la fenêtre. Cette unité permet de régler la taille de la police en fonction de la largeur de l'écran, ce qui en fait un excellent outil de conception réactive.

Comment rendre ma taille de police réactive à l'aide de CSS?

Pour rendre votre taille de police réactive, vous pouvez utiliser des unités relatives telles que EM, REM ou VW. Ces unités ajustent la taille de la police en fonction de la taille de l'élément parent, de la taille de l'élément racine ou de la largeur de la fenêtre. Cela permet à la taille de la police de changer dynamiquement en fonction de la taille de l'écran ou de la taille de l'élément parent.

Comment fonctionne la fonction

dans la taille de la police CSS? calc() La fonction

dans

dans CSS vous permet d'effectuer des calculs pour déterminer la taille de la police. Il peut être utilisé avec différentes unités, ce qui en fait un outil puissant pour créer des conceptions réactives. Par exemple, vous pouvez définir une taille de police en utilisant calc() qui est un mélange de valeurs de pixels fixes et de valeurs de la fenêtre relatives. calc() Quel est l'impact de l'attribut

dans

dans CSS? font-size-adjust L'attribut

dans

dans CSS vous permet d'ajuster la hauteur x de la police (la hauteur des lettres minuscules). Ceci est utile lorsque vous utilisez des polices alternatives car elle garantit que la hauteur X est conservée et que la lisibilité est cohérente, quelle que soit la police utilisée. font-size-adjust

Comment utiliser les unités CH dans la taille de la police CSS?

La largeur de l'unité CH dans CSS par rapport à la police "0" (zéro) Largeur de la police utilisée. Cette unité est utile lorsque vous souhaitez définir la largeur d'un élément basé sur les caractères qui y sont contenus, tels que la définition de la largeur d'un bouton basé sur la longueur du texte interne.

Quelle est l'unité LH de la taille de la police CSS?

LH L'unité représente la "hauteur de conduite". Sa hauteur de ligne par rapport à l'élément. Cette unité est utile lorsque vous souhaitez définir la hauteur d'un élément basé sur la hauteur de la ligne, comme la création d'un rythme vertical dans votre conception.

Comment utiliser les unités ex dans la taille de la police CSS?

L'unité EX dans CSS par rapport à la hauteur X de la police actuelle. La hauteur x est généralement la hauteur des lettres minuscules (telles que "x"). Cette unité est utile lorsque vous souhaitez définir la hauteur d'un élément basé sur la hauteur X, comme des éléments d'alignement verticalement basés sur du texte interne.

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!