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

Question

Il y a de nombreux articles et questions à propos de pourcentage de la taille par rapport à d'autres de la taille des polices. Cependant, je ne peux pas savoir CE à quoi la référence de la pour cent de la valeur est censé être. Je comprends que c'est "de la même taille dans tous les navigateurs'. J'ai aussi lu ceci, par exemple:

Pour cent ( % ): % unité est beaucoup comme l'unité "em", à l'exception de quelques différences fondamentales. D'abord et avant tout, la police de la taille est égale à 100% (c'est à dire 12pt = 100%). Tout en utilisant le pourcentage de l'unité, le texte reste entièrement modulable pour les appareils mobiles et de l'accessibilité.

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

Mais si vous dites "c'est à dire 12 pt = 100%", alors cela signifie que vous devez d'abord définir font-size: 12pt. Est-ce qu'il fonctionne? Vous devez d'abord définir une taille dans une mesure absolue, puis reportez-vous à ce que '100%'? Ne fait pas beaucoup de sens, car de nombreux échantillons dire, il est utile de mettre:

body {
  font-size: 100%;
}

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 semble plus grand que Times New Roman, par exemple. Aussi, si je viens de le faire, de la taille du corps = 100%, serait qui signifie qu'il sera le même sur tous les navigateurs? Ou seulement si j'ai d'abord définir une valeur absolue?

MISE À JOUR, SAM JUIL 23

Je suis en arriver là, mais s'il vous plaît garder avec moi.

Ainsi, le % de la valeur se rapporte à la taille de police par défaut du navigateur, si je comprends bien. Eh bien, c'est agréable, mais donne-moi encore plusieurs autres questions:

1. Est-ce de taille standard, toujours le même pour chaque version de votre navigateur, ou varient-elles selon les versions?
2. J' ! (voir image ci-dessous) les paramètres de Google Chrome (jamais regardé ça avant!), et je vois standard "serif", "sans-serif" et "monospace" paramètres". Mais comment dois-je interpréter cela pour d'autres polices? Dire que je définissent font: 100% Georgia;, quelle taille a le navigateur? Il va chercher la taille standard pour les serif, ou a la "Géorgie" police d'une taille standard pour le navigateur
3. Sur plusieurs sites j'ai lu 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 de ce que j'apprends maintenant, je crois que vous devriez vraiment choisir entre soit redimensionnable texte (à l'aide d' % ou em, comme ce qu'ils recommandent dans cette citation), ou ayant des " précise, uniforme de la police tailles sur l'ensemble des navigateurs (à l'aide de px ou pt comme base). Est-ce correct?

Paramètres Google:

C'est de cette façon je pense que les choses pourraient ressembler si vous ne définissez pas la taille en valeur absolue.

Answer 1

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 la vérification de la taille de la police. Vous pouvez faire de même pour les autres navigateurs aussi bien.

Personnellement, j'aime à contrôler la taille de police par défaut de mes sites web, dans un fichier CSS qui est inclus dans chaque page, je vais définir le CORPS par défaut, comme suit:

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

Maintenant la police-taille de toutes mes balises HTML va hériter d'une taille de police de 14px.

Dire que je veux un tous les divs pour avoir une taille de police de 10% plus grand que le corps, je n'ai tout simplement:

div {
    font-size: 110%
}

Maintenant, n'importe quel navigateur à afficher mes pages autmoatically faire tous les divs 10% plus grande que celle du corps, qui doit être quelque chose comme 15.4 px.

Si je veux une taille de police de tous les div à 10% plus petite, je fais:

div {
    font-size: 90%
}

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

Aussi, vous devriez savoir que, depuis une taille de police est hérité, que chaque div imbriqués va diminuer en taille de police de 10%, donc:

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

L'intérieur de la div ont une taille de police de 11.34 px (90% de 12,6 px), qui peuvent ne pas avoir été prévu.

Cela peut aider dans l'explication: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

Answer 2

Ma compréhension est que, lorsque la police est définie comme suit

le navigateur renvoie la police selon les paramètres utilisateur pour que le 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 prends cela pour signifier ce qui est défini dans le navigateur.

Answer 3

Un pourcentage de la valeur de l' font-size de la propriété est par rapport à l'élément parent de la taille de la police. CSS 2.1 dit ce obscurément et confusément (en se référant à "hérité de la taille de la police"), mais CSS3 Texte dit très clairement.

Le parent de l' body élément est l'élément racine, c'est à dire l' html élément. Sauf si elle est définie dans une feuille de style, la taille de la police de l'élément racine est dépendant de l'implémentation. Il dépend généralement de paramètres de l'utilisateur.

Paramètre font-size: 100% est inutile dans de nombreux cas, comme un élément hérite de son parent taille de la police (qui mène au même résultat), si aucune feuille de style définit sa propre taille de la police. Cependant, il peut être utile de remplacer les paramètres dans d'autres feuilles de style (y compris le navigateur par défaut des feuilles de style).

Par exemple, un input élément a généralement un paramètre dans le navigateur de la feuille de style, ce qui rend sa valeur par défaut taille de police plus petite que celle de la copie de texte. Si vous souhaitez faire la taille de la police, vous pouvez définir

input { font-size: 100% }

Pour l' body élément, l'logiquement redondant paramètre font-size: 100% est utilisé assez souvent, que l'on croit pour aider à lutter contre certains bogues de navigateur (dans les navigateurs qui n'ont probablement perdu de leur importance maintenant).

Answer 4

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

Il y a une différence entre font: 100% Georgia et font-size:100%; font-family:'Georgia'. Si c'était la méthode abrégée fait, la taille de police serait dénuée de sens. Mais il contient aussi un grand nombre de propriétés à leurs valeurs par défaut: la hauteur de la ligne devient normal (ou environ 1,2), idem pour le style (italique non) et de poids (non gras).

C'est tout. Les autres réponses déjà mentionné, tout le reste n'est à mentionner.

Answer 5

C’est par rapport à la taille de police navigateur par défaut sauf si vous l’ignorer avec une valeur en pt ou px.