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


138

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:

Google Chrome Settinsg

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

entrez la description de l'image ici

Réponses:


89

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


Merci! Cela rend les choses beaucoup plus claires. Mais je m'interroge toujours sur les articles affirmant «exactitude» ou «cohérence» lors de l'utilisation de%. Cela semble être tout à fait FAUX si j'interprète correctement votre réponse. J'ai mis à jour la question avec quelques questions supplémentaires ...
user852091

3
La réponse à la question posée (100% de quoi?) Est incorrecte, il y a plusieurs inexactitudes (tous les éléments n'héritent pas de la taille de la police), et il y a des notes et des opinions sur des problèmes qui n'ont pas été interrogés.
Jukka K. Korpela

La densité de pixels doit vraiment être prise en compte. Quelque chose qui représente 100% de la page sur un téléphone 4K pensera qu'il a des milliers de pixels de résolution horizontale et verticale. Pour le contenu Flash avec NO_SCALE, par exemple les applications Web, etc., les commandes seront minuscules, en particulier les menus, par exemple sur un LG G3. Cela est également vrai pour certains contenus HTML dimensionnés en pixels. D'une manière ou d'une autre, la densité de pixels (pixels par pouce) doit être prise en compte, soit par l'utilisation d'unités totalement relatives, soit par un redimensionnement dynamique basé sur JavaScript.
Triynko

1
Confirmé que les navigateurs modernes utilisent toujours 12pt / 16px @ 96ppi par défaut. Sur une note connexe, vous pouvez utiliser "rem" au lieu de "em" pour toujours mettre à l'échelle un élément spécifique par rapport à la racine (élément html, ou par défaut du navigateur). Peut être utile avec une hiérarchie complexe d'éléments de taille relative.
Beejor

Il est préférable de définir vos en font-sizeutilisant des unités relatives telles que em, remou %. L'utilisation pxremplacera la taille de police par défaut du navigateur! De nombreux utilisateurs spécifient une taille de police personnalisée pour faciliter la lecture du texte.
mfluehr le

15

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é.


en fait, le parent de bodyest html. ce body { font-size: 100%; }sera donc 100% de la htmltaille de la police, pas celle par défaut du navigateur. Cependant, ce sont généralement les mêmes, donc vous avez effectivement raison. Mais parfois, vous verrez une html { font-size: ??? }règle.
chharvey

9

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).


3
La seule instance qui font-size:100%pourrait servir un objectif est en mode Quirks, où les tailles de police ne sont pas héritées dans les tableaux. Avec ce style, les tableaux obtiennent la taille de police parente. Bien sûr, personne de sensé n'utilise plus le mode Quirks ...
Mr Lister

4

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.


Donc, cela varierait si chaque navigateur?
user852091

2
Oui, chaque navigateur a ses propres paramètres par défaut, y compris la taille de la police. C'est pourquoi vous devez généralement utiliser la réinitialisation css.
RocketR

1
Ceci est une erreur. C'est le pourcentage de l'élément parent. Vous rencontrez peut-être le pourcentage de la taille de police par défaut car votre élément parent a hérité de la taille de police par défaut.
Zectbumo

@Zectbumo C'est vrai, pas tout à fait précis. Mais la question mentionne body, pas un élément imbriqué arbitrairement, donc la réponse est correcte avec un petit astérisque :)
RocketR

: - / sauf qu'il est imbriqué car le parent de <body> est <html>
Zectbumo

4

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.


3

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.


1

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.


0

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.


0

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:

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.