CSS: taille de police 100% - 100% de quoi?

Il existe de nombreux articles et questions sur les polices de taille en pourcentage par rapport aux polices de taille différente . Cependant, je ne peux pas savoir QUELLE est censée être la référence de la valeur en pourcentage. Je comprends que c'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 la police actuelle est égale à 100% (c'est-à-dire 12pt = 100%). Lorsque vous utilisez l'unité de pourcentage, votre texte reste entièrement évolutif pour les appareils mobiles et pour l'accessibilité.

Source: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Mais si vous dites "ie 12 pt = 100%", cela signifie que vous devez d'abord définir font-size: 12pt. Est-ce ainsi que cela fonctionne? Vous définissez d'abord une taille dans une mesure absolue, puis vous vous référez à cela comme «100%»? Cela n'a pas beaucoup de sens, comme le disent de nombreux échantillons, il est utile de mettre:

body {
  font-size: 100%;
}

Donc, en faisant cela, à QUELLE est la taille de la police par rapport? 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 cela, la taille du corps = 100%, cela signifierait-il que ce sera la même chose sur tous les navigateurs? Ou seulement si je définis d'abord une valeur absolue?

MISE À JOUR, SAM 23 JUIL

J'y arrive, mais s'il vous plaît, soyez indulgents avec moi.

Ainsi, 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 à nouveau plusieurs autres questions:

1. Cette taille standard est-elle toujours la même pour chaque version de navigateur ou varie-t-elle d'une version à l'autre?
2. JE ! trouvé (voir l'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? Dites que je définis font: 100% Georgia;, quelle taille prendra le navigateur? Va-t-il rechercher la taille standard pour empattement ou la police "Georgia" a-t-elle une taille standard pour le navigateur
3. Sur plusieurs sites Web, je lis des 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 d'après ce que j'apprends maintenant, je pense que vous devriez en fait choisir entre du texte redimensionnable (en utilisant% ou em, comme ce qu'ils recommandent dans cette citation), ou avoir des `` tailles de police précises et cohérentes dans tous les navigateurs '' (en utilisant px ou pt comme base). Est-ce correct?

Paramètres Google:

Voici à quoi je pense que les choses pourraient ressembler si vous ne définissez pas la taille en valeurs absolues.

Le navigateur par défaut qui 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 contrôler la taille de police par défaut de mes sites Web, donc dans un fichier CSS inclus dans chaque page, je définirai la valeur par défaut de BODY, comme suit:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px
}

Maintenant, la taille de la police de toutes mes balises HTML héritera d'une taille de police de 14px.

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%
}

Maintenant, tout navigateur qui affiche mes pages rendra automatiquement toutes les divs 10% plus grandes que celles du corps, ce qui devrait être quelque chose comme 15,4 pixels.

Si je veux que la taille de la police de tous les div soit 10% plus petite, je fais:

div {
    font-size: 90%
}

Cela rendra tous les div une taille de police de 12,6 px.

Vous devez également savoir que puisque la taille de la police est héritée, chaque div imbriqué diminuera la taille de la police de 10%, donc:

<div>Outer DIV.
    <div>Inner DIV</div>
</div>

Le div interne aura une taille de police de 11,34 px (90% de 12,6 px), ce qui n'était peut-être pas prévu.

Cela peut aider dans l'explication: 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 selon les paramètres utilisateur de ce navigateur.

La spécification dit que% est rendu

par rapport à la taille de 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é.

Un pourcentage de la valeur de la font-sizepropriété est relatif à la taille de police de l'élément parent . CSS 2.1 le dit de manière obscure et déroutante (faisant référence à la «taille de police héritée»), mais le texte CSS3 le dit très clairement.

Le parent de l' bodyélément est l'élément racine, c'est-à-dire l' htmlélément. À moins qu'elle ne soit définie dans une feuille de style, la taille de la police de l'élément racine dépend de l'implémentation. Cela dépend généralement des paramètres de l'utilisateur.

La définition font-size: 100%est inutile dans de nombreux cas, car un élément hérite de la taille de police de son parent (conduisant au même résultat), si aucune feuille de style ne définit sa propre taille de police. Cependant, 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 inputélément a généralement un paramètre dans la feuille de style du navigateur, ce qui rend sa taille de police par défaut inférieure à celle du texte de copie. Si vous souhaitez que la taille de la police soit la même, vous pouvez définir

entrée {font-size: 100%}

Pour l' bodyélément, le paramètre logiquement redondant font-size: 100%est utilisé assez souvent, car il est censé aider à lutter contre certains bogues 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 en px.

Désolé si je suis en retard à la fête, mais dans votre modification, vous faites une remarque à propos de font: 100% Georgialaquelle les autres réponses n'ont pas répondu.

Il y a une différence entre font: 100% Georgiaet 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 à leurs valeurs par défaut: la hauteur de la ligne devient normal(ou autour de 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 qu'il y avait à mentionner.

Comme vous l'avez montré de manière convaincante, le font-size: 100%;rendu ne sera pas le même dans tous les navigateurs. Cependant, vous définirez votre police dans votre fichier CSS, ce sera donc la même chose (ou une solution de secours) dans tous les navigateurs.

Je pense que cela font-size: 100%;peut être très utile en le combinant avec un emdesign basé sur. Comme le montre cet article , cela créera un site Web très flexible.

Quand est-ce utile? Lorsque votre site a besoin de s'adapter aux souhaits des visiteurs. Prenez par exemple un homme âgé qui met 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 parce qu'il doit autrement plisser les yeux. La plupart des sites se briseraient, mais les sites basés sur em sont capables de faire face à ces situations.

Par rapport à la taille par défaut définie pour cette police.

Si quelqu'un ouvre votre page dans un navigateur Web, il utilise une police et une taille de police par défaut.

D'après ce que je comprends, cela aide votre contenu à s'adapter à différentes valeurs de famille de polices et de tailles de police, ce qui rend votre contenu évolutif. Quant à la question de l'héritage de la taille de la police, nous pouvons toujours passer outre en donnant une taille de police spécifique pour l'élément.

Selon TOUTES LES SPÉCIFICATIONS DATANT DE 1996 , les valeurs de pourcentage sur se font-sizeréfèrent à la taille de police (calculée) 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 faire si le divdéclare une taille de police relative, comme ems, ou pire encore, un autre pourcentage ?? Voir «calculé» ci-dessus. Quelle que soit l'unité absolue vers laquelle l'unité relative est convertie.

La seule question qui reste est ce qui se passe lorsque vous utilisez une valeur de pourcentage sur l'élément racine, qui n'a pas de parent:

html {
  font-size: 62.5%; /* 62.5% of what? */
}

Dans ce cas, voyez le "doublon" de cette question. TLDR: les pourcentages sur l'élément racine se réfèrent à la taille de police par défaut du navigateur, qui peut être différente selon l'utilisateur.

Références:

• Spécification CSS 1 (1996)
• Spécification CSS 2.1 (2011)
• Spécification des polices CSS niveau 3 (2013)
• Brouillon de l'éditeur CSS Fonts Level 3 (2017)