CSS: 100% del tamaño de fuente, ¿100% de qué?

Hay muchos artículos y preguntas sobre fuentes de tamaño porcentual frente a otras de otro tamaño . Sin embargo, no puedo averiguar CUÁL se supone que es la referencia del valor porcentual. Entiendo que esto es 'el mismo tamaño en todos los navegadores'. También leí esto, por ejemplo:

Porcentaje (%): la unidad de porcentaje es muy parecida a la unidad "em", salvo algunas diferencias fundamentales. En primer lugar, el tamaño de fuente actual es igual al 100% (es decir, 12pt = 100%). Mientras usa la unidad de porcentaje, su texto permanece totalmente escalable para dispositivos móviles y para accesibilidad.

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

Pero si dice "es decir, 12 pt = 100%", significa que primero tiene que definir font-size: 12pt. ¿Así es como funciona? ¿Primero define un tamaño en una medida absoluta y luego se refiere a esto como '100%'? No tiene mucho sentido, ya que muchas muestras dicen que es útil decir:

body {
  font-size: 100%;
}

Entonces, al hacer esto, ¿CUÁL es el tamaño de fuente relativo? Noto que el tamaño que veo en mi pantalla difiere para cada fuente. Arial parece mucho más grande que Times New Roman, por ejemplo. Además, si solo hiciera esto, el tamaño del cuerpo = 100%, ¿ eso significaría que será igual en todos los navegadores? ¿O solo si primero defino un valor absoluto?

ACTUALIZACIÓN, SÁB 23 DE JULIO

Estoy llegando allí, pero por favor tengan paciencia conmigo.

Entonces, el valor% se relaciona con el tamaño de fuente predeterminado del navegador, si lo entiendo correctamente. Bueno, eso es bueno, pero nuevamente me da varias otras preguntas:

1. ¿Es este tamaño estándar siempre el mismo para cada versión del navegador o varían entre versiones?
2. YO ! encontré (vea la imagen a continuación) la configuración de Google Chrome (¡nunca antes había visto esto!), y veo la configuración estándar "serif", "sans-serif" y "monoespacio". Pero, ¿cómo interpreto esto para otras fuentes? Digamos que defino font: 100% Georgia;, ¿qué tamaño tomará el navegador? ¿Buscará el tamaño estándar para serif o la fuente "Georgia" tiene un tamaño estándar para el navegador?
3. En varios sitios web leo cosas como 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. Pero por lo que estoy aprendiendo ahora, creo que en realidad debería elegir entre texto redimensionable (usando% o em, como lo que recomiendan en esta cita), o tener 'tamaños de fuente precisos y consistentes en los navegadores' (usando px o pt como base). ¿Es esto correcto?

Configuraciones de Google:

Así es como yo creo que las cosas podrían ser similar si no se define el tamaño en valores absolutos.

El navegador predeterminado, que es algo así como 16pt para Firefox, puede verificar yendo a las opciones de Firefox, haciendo clic en la pestaña Contenido y verificando el tamaño de la fuente. También puede hacer lo mismo para otros navegadores.

Personalmente, me gusta controlar el tamaño de fuente predeterminado de mis sitios web, por lo que en un archivo CSS que se incluye en cada página, estableceré el BODY predeterminado, de esta manera:

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

Ahora el tamaño de fuente de todas mis etiquetas HTML heredará un tamaño de fuente de 14px.

Digamos que quiero que todos los divs tengan un tamaño de fuente 10% más grande que el cuerpo, simplemente hago:

div {
    font-size: 110%
}

Ahora, cualquier navegador que vea mis páginas automáticamente hará que todos los divs sean un 10% más grandes que los del cuerpo, lo que debería ser algo así como 15.4px.

Si quiero que el tamaño de fuente de todos los div sea un 10% más pequeño, lo hago:

div {
    font-size: 90%
}

Esto hará que todos los divs tengan un tamaño de fuente de 12.6px.

También debe saber que, dado que el tamaño de fuente se hereda, que cada div anidado disminuirá en tamaño de fuente en un 10%, por lo tanto:

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

El div interno tendrá un tamaño de fuente de 11.34px (90% de 12.6px), que puede no haber sido diseñado.

Esto puede ayudar en la explicación: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

Entiendo que cuando la fuente se configura de la siguiente manera

body {
  font-size: 100%;
}

el navegador representará la fuente según la configuración del usuario para ese navegador.

La especificación dice que se representa%

relativo al tamaño de fuente del elemento padre

http://www.w3.org/TR/CSS1/#font-size

En este caso, supongo que significa lo que está configurado el navegador.

Un porcentaje en el valor de la font-sizepropiedad es relativo al tamaño de fuente del elemento padre . CSS 2.1 dice esto de manera oscura y confusa (refiriéndose al "tamaño de fuente heredado"), pero CSS3 Text lo dice muy claramente.

El padre del bodyelemento es el elemento raíz, es decir, el htmlelemento. A menos que se establezca en una hoja de estilo, el tamaño de fuente del elemento raíz depende de la implementación. Por lo general, depende de la configuración del usuario.

La configuración no font-size: 100%tiene sentido en muchos casos, ya que un elemento hereda el tamaño de fuente de su padre (lo que lleva al mismo resultado), si ninguna hoja de estilo establece su propio tamaño de fuente. Sin embargo, puede ser útil anular la configuración en otras hojas de estilo (incluidas las hojas de estilo predeterminadas del navegador).

Por ejemplo, un inputelemento generalmente tiene una configuración en la hoja de estilo del navegador, lo que hace que su tamaño de fuente predeterminado sea más pequeño que el del texto de copia. Si desea que el tamaño de fuente sea el mismo, puede configurar

input {font-size: 100%}

Para el bodyelemento, la configuración lógicamente redundante font-size: 100%se usa con bastante frecuencia, ya que se cree que ayuda contra algunos errores del navegador (en navegadores que probablemente han perdido su importancia ahora).

Es relativo al tamaño de fuente predeterminado del navegador a menos que lo anule con un valor en pt o px.

Lo siento si llego tarde a la fiesta, pero en tu edición haces un comentario sobre el font: 100% Georgiaque las otras respuestas no han respondido.

Hay una diferencia entre font: 100% Georgiay font-size:100%; font-family:'Georgia'. Si eso fuera todo el método abreviado, la parte del tamaño de fuente no tendría sentido. Pero también establece muchas propiedades a sus valores predeterminados: la altura de la línea se convierte normal(o alrededor de 1.2), lo mismo para el estilo (sin cursiva) y el peso (sin negrita).

Eso es todo. Las otras respuestas ya mencionaron todo lo demás que había que mencionar.

Como demostró de manera convincente, el font-size: 100%;no se mostrará igual en todos los navegadores. Sin embargo, configurará la fuente en su archivo CSS, por lo que será la misma (o una alternativa) en todos los navegadores.

Creo que font-size: 100%;puede ser muy útil cuando se combina con un emdiseño basado. Como muestra este artículo , esto creará un sitio web muy flexible.

¿Cuándo es esto útil? Cuando su sitio necesita adaptarse a los deseos de los visitantes. Tomemos, por ejemplo, un hombre mayor que pone su tamaño de fuente predeterminado en 24 px. O alguien con una pantalla pequeña con una resolución grande que aumenta su tamaño de fuente predeterminado porque de lo contrario tiene que entrecerrar los ojos. La mayoría de los sitios se romperían, pero los sitios basados ​​en em pueden hacer frente a estas situaciones.

Relativo al tamaño predeterminado definido para esa fuente.

Si alguien abre su página en un navegador web, hay una fuente y un tamaño de fuente predeterminados que utiliza.

Según tengo entendido, ayuda a que su contenido se ajuste con diferentes valores de familia de fuentes y tamaños de fuente, lo que hace que su contenido sea escalable. En cuanto a la cuestión de heredar el tamaño de fuente, siempre podemos anular dando un tamaño de fuente específico para el elemento.

De acuerdo con TODAS LAS ESPECIFICACIONES QUE DAN HASTA 1996 , los valores porcentuales se font-sizerefieren al tamaño de fuente (calculado) del elemento padre .

<style>
div {
  font-size: 16px;
}
span {
  font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>

Es fácil.

¿Qué pasa si divdeclara un tamaño de fuente relativo, como ems, o peor aún, otro porcentaje? Ver "calculado" arriba. Cualquier unidad absoluta a la que se convierta la unidad relativa.

La única pregunta que queda es qué sucede cuando usa un valor porcentual en el elemento raíz, que no tiene padre:

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

En ese caso, vea el "duplicado" de esta pregunta. TLDR: los porcentajes en el elemento raíz se refieren al tamaño de fuente predeterminado del navegador, que puede ser diferente por usuario.

Referencias

• CSS 1 spec (1996)
• Especificación CSS 2.1 (2011)
• Especificaciones de nivel 3 de fuentes CSS (2013)
• Borrador del editor de fuentes CSS Nivel 3 (2017)