web-dev-qa-db-fra.com

Utiliser un pourcentage pour la taille de la police?

J'ai lu pas mal de choses sur le redimensionnement des polices récemment, la plupart se moquant de l'utilisation de px comme un crime impardonnable (ok, peut-être pas si mal, vous avez l'idée) car il ne redimensionne pas correctement dans les navigateurs plus anciens.

Je veux vraiment avoir une norme que j'utilise moi-même, dans le passé qui a été px, simplement parce qu'elle est simple, facile à comprendre et assez facile à atteindre les tailles de police exactes qui sont spécifiées dans les conceptions - mais je doute maintenant d'utiliser px.

J'ai utilisé em sur un projet récemment car il avait besoin d'une fonctionnalité de redimensionnement de texte que j'ai créée à l'aide de jQuery. Mais je l'ai trouvé assez frustrant à cause de la façon dont em amplifie si vous avez deux éléments à l'intérieur l'un de l'autre avec une taille em spécifiée (j'espère que cela a du sens)

Donc je me demandais d'utiliser% pour le redimensionnement des polices, j'ai vu quelques grands sites Web utiliser cette technique (à savoir, Yahoo) et d'après ce que je comprends, il semble avoir tous les avantages d'em sans l'amplification incroyablement ennuyeuse.

Bref, je me demande simplement s'il y a des problèmes avec% pour le dimensionnement des polices en CSS? Serait-ce mieux que d'utiliser PX en termes de redimensionnement des polices? Et y a-t-il des inconvénients notables?

Toutes mes excuses si le texte de présentation avant la question est un peu trop:/Je suis toujours en train de m'habituer à tout le QA

cssfont-size
43
Sean

Dans CSS3, utilisez rem (racine em). Le dimensionnement ne sera pas affecté par la taille em de l'élément parent.

La taille de la police racine est définie en définissant la taille de la police sur :root pseudo-élément, comme ceci:

:root {
    font-size: 16px;
}
16
Richik SC

essayez d'utiliser ceci

body {
  margin: 0px;
  padding: 0px;
  font-size: 62.5%;
}

body>#wrapper {
  font-size:1em;
}

donc, quand vous dites quelque chose comme 1em à l'intérieur du "wrapper", vous aurez une taille très similaire à 10px. voici un exemple de tableau:

3em == 30px
.5em == 5px
8.5em == 85px

Cela vous aidera dans la transition

P.d: bien sûr, vous avez besoin d'une étiquette d'emballage après le corps

7
Alwin Kesler

Pour autant que je sache, la norme en matière de conception Web consiste à utiliser un pourcentage pour définir la taille de la police dans le corps, puis à utiliser ems pour modifier la taille de la police par la suite. Vous pouvez utiliser des pourcentages en dehors de la balise body sans effets secondaires indésirables, mais je pense que de nombreux développeurs trouvent que les ems sont plus faciles à travailler (n'importe qui est libre de me vérifier à ce sujet).

Le danger vient si vous utilisez ems pour définir la taille de la police du corps; les anciens navigateurs s'étouffent et affichent incorrectement le texte, en particulier lors d'un zoom.

3
bronzehedwick