CSS: 100% de la taille de la police - 100% de quoi?
Il y a plusieurs _ { articles et questions à propos de taille par rapport à une autre taille polices. Cependant, je ne peux pas savoir QUOI est supposé être la référence de la valeur en pourcentage. Je comprends que cela est "la même taille dans tous les navigateurs". J'ai aussi lu ceci, par exemple:
Pourcentage (%): L’unité de pourcentage ressemble beaucoup à l’unité «em», à l’exception de quelques différences fondamentales. Tout d’abord, la taille de police actuelle est égale à 100% (soit 12 pt = 100%). Lorsque vous utilisez l'unité de pourcentage, votre texte reste entièrement évolutif pour les appareils mobiles et l'accessibilité.
Source: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
Mais si vous dites "12 pt = 100%", cela signifie que vous devez d'abord définir font-size: 12pt. Est-ce que ça fonctionne? Vous définissez d’abord une taille dans une mesure absolue, puis vous vous référez à «100%»? Cela n'a pas beaucoup de sens, comme le disent de nombreux exemples, il est utile de mettre:
body {
font-size: 100%;
}
En faisant cela, À QUOI correspond la taille de la police? Je remarque que la taille que je vois sur mon écran diffère pour chaque police. Arial a l'air bien plus grand que Times New Roman, par exemple. De plus, si je faisais simplement ceci, la taille du corps = 100%, cela signifierait-il que ce sera la même sur tous les navigateurs? Ou seulement si je définis d'abord une valeur absolue?
UPDATE, SAM 23 JUILLET
J'y arrive, mais s'il vous plaît, supportez-moi.
Donc, la valeur% se rapporte à la taille de police par défaut du navigateur, si je comprends bien. Eh bien, c’est bien, mais me pose encore plusieurs autres questions:
- Cette taille standard est-elle toujours la même pour chaque version de navigateur ou varie-t-elle entre les versions?
- JE ! trouvé (voir image ci-dessous) les paramètres de Google Chrome (jamais regardé cela auparavant!), et je vois les paramètres standard "serif", "sans-serif" et "monospace". Mais comment interpréter cela pour d'autres polices? Disons que je définis
font: 100% Georgia;, quelle taille le navigateur prendra-t-il? Recherchera-t-il la taille standard de serif ou la police "Georgia" aura-t-elle une taille standard pour le navigateur? - Sur plusieurs sites Web, je lis choses comme
Sizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today. Mais de ce que j’apprends maintenant, je pense que vous devriez choisir entre un texte redimensionnable (en utilisant% ou em, comme ce qu’ils recommandent dans cette citation), ou en ayant des tailles de police précises et cohérentes sur tous les navigateurs pt comme base). Est-ce correct?
Paramètres Google:
C'est ainsi que je pense que les choses pourraient ressembler si vous ne définissez pas la taille en valeurs absolues.
La valeur par défaut du navigateur est quelque chose comme 16pt pour Firefox. Vous pouvez vérifier en allant dans les options de Firefox, en cliquant sur l’onglet Contenu et en vérifiant la taille de la police. Vous pouvez également faire de même pour les autres navigateurs.
Personnellement, j'aime bien contrôler la taille de police par défaut de mes sites Web. Par conséquent, dans un fichier CSS inclus dans chaque page, je définirai la valeur par défaut BODY, comme suit:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px
}
Maintenant, la taille de police de toutes mes balises HTML héritera d'une taille de police de 14 pixels.
Dites que je veux que tous les divs aient une taille de police 10% plus grande que le corps, je fais simplement:
div {
font-size: 110%
}
Désormais, tous les navigateurs qui verront mes pages créeront automatiquement des divs de 10% supérieures à celles du corps, ce qui devrait être de l’ordre de 15,4 pixels.
Si je veux que la taille de la police de toutes les div soit 10% plus petite, je le fais:
div {
font-size: 90%
}
Cela fera que tous les divs auront une taille de police de 12.6px.
Vous devez également savoir que, puisque la taille de la police est héritée, la taille de chaque div imbriquée diminuera de 10%. Par conséquent:
<div>Outer DIV.
<div>Inner DIV</div>
</div>
La division interne aura une taille de police de 11,34 pixels (90% de 12,6 pixels), ce qui n’a peut-être pas été voulu.
Cela peut aider à expliquer: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage
Je crois comprendre que lorsque la police est définie comme suit
body {
font-size: 100%;
}
le navigateur rendra la police conformément aux paramètres utilisateur de ce navigateur.
La spécification dit que% est rendu
par rapport à la taille de la police de l'élément parent
http://www.w3.org/TR/CSS1/#font-size
Dans ce cas, je suppose que cela signifie ce que le navigateur est configuré pour.
Un pourcentage dans la valeur de la propriété font-size est relatif à à la taille de police de l’élément parent. CSS 2.1 dit ceci de manière obscure et déroutante (en se référant à «taille de police héritée»), mais CSS3 Text dit très clairement.
Le parent de l’élément body est l’élément racine, c’est-à-dire l’élément html. Sauf dans une feuille de style, la taille de la police de l'élément racine dépend de la mise en œuvre. Cela dépend généralement des paramètres de l'utilisateur.
Définir font-size: 100% est inutile dans de nombreux cas, puisqu'un élément hérite de la taille de la police de son parent (donnant le même résultat), si aucune feuille de style ne définit sa propre taille de police. Toutefois, il peut être utile de remplacer les paramètres d'autres feuilles de style (y compris les feuilles de style par défaut du navigateur).
Par exemple, un élément input a généralement un paramètre dans la feuille de style du navigateur, rendant sa taille de police par défaut inférieure à celle du texte copié. Si vous souhaitez que la taille de la police soit la même, vous pouvez définir
input {taille de la police: 100%}
Pour l'élément body, le paramètre logiquement redondant font-size: 100% est utilisé assez souvent, car il est censé aider à lutter contre certains bugs du navigateur (dans les navigateurs qui ont probablement perdu leur signification maintenant).
Elle est relative à la taille de police par défaut du navigateur, sauf si vous la remplacez par une valeur en pt ou px.
Comme vous l'avez montré de manière convaincante, le font-size: 100%; ne sera pas rendu de la même manière dans tous les navigateurs. Cependant, vous allez définir la police de caractères dans votre fichier CSS, donc ce sera la même chose (ou un repli) dans tous les navigateurs.
Je crois que font-size: 100%; peut être très utile lorsqu’il est combiné avec un design basé sur em. Comme cet article montre, cela créera un site Web très flexible.
Quand est-ce utile? Lorsque votre site doit s'adapter aux souhaits des visiteurs. Prenons par exemple un homme âgé qui place sa taille de police par défaut à 24 px. Ou quelqu'un avec un petit écran avec une grande résolution qui augmente sa taille de police par défaut, car il doit sinon plisser les yeux. La plupart des sites s'effondreraient, mais les sites basés sur em sont capables de faire face à ces situations.
Désolé si je suis en retard à la fête, mais dans votre modification, vous faites une remarque à propos de font: 100% Georgia, à laquelle les autres réponses n'ont pas répondu.
Il y a une différence entre font: 100% Georgia et font-size:100%; font-family:'Georgia'. Si c'était tout ce que faisait la méthode abrégée, la partie taille de la police n'aurait aucun sens. Mais il définit également de nombreuses propriétés sur leurs valeurs par défaut: la hauteur de la ligne devient normal (ou environ 1,2), idem pour le style (non italique) et le poids (non gras).
C'est tout. Les autres réponses mentionnaient déjà tout ce qui restait à mentionner.
Par rapport à la taille par défaut définie pour cette police.
Si quelqu'un ouvre votre page sur un navigateur Web, il utilise une police et une taille de police par défaut.
En ce qui concerne ma compréhension, cela aide votre contenu à s’ajuster avec différentes valeurs de famille et de taille de police. En ce qui concerne le problème de la taille de police inhérente, nous pouvons toujours remplacer en donnant une taille de police spécifique pour l'élément.
Selon ALL THE SPECS DAY BACK TO 1996, les valeurs de pourcentage sur font-size font référence à l'élément (calculé) de l'élément parent.
<style>
div {
font-size: 16px;
}
span {
font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>
C'est si facile.
Que se passe-t-il si div déclare une taille de police relative, telle que ems, ou même pire, un autre pourcentage ?? Voir «calculé» ci-dessus. Quelle que soit l'unité absolue convertie en unité relative.
La seule question qui reste est de savoir ce qui se passe lorsque vous utilisez une valeur en pourcentage sur l'élément racine, qui n'a pas de parent:
html {
font-size: 62.5%; /* 62.5% of what? */
}
Dans ce cas, voir le “duplicata” de cette question. TLDR: les pourcentages sur l'élément racine font référence à la taille de police par défaut du navigateur, qui peut être différente selon l'utilisateur.
Références: