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

Question

Hay manyarticles y questions sobre percentage-sized vs other-sized fuentes. Sin embargo, no puedo descubrir QUÉ se supone que es la referencia del valor porcentual. Entiendo que esto es "del mismo tamaño en todos los navegadores". También leo esto, por ejemplo:

Porcentaje (%): El porcentaje de unidad es muy parecido a la unidad "em", salvo por algunas diferencias fundamentales. En primer lugar, el tamaño de letra actual es igual al 100% (es decir, 12pt = 100%). Al usar la unidad de porcentaje, el texto sigue siendo totalmente escalable para dispositivos móviles y para el acceso.

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

Pero si usted dice "es decir de 12 puntos = 100%", entonces 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 para poner:

body { 
    font-size: 100%; 
} 

Así que al hacer esto, ¿QUÉ es el tamaño de la fuente con respecto a? Noto que el tamaño que veo en mi pantalla es diferente para cada fuente. Arial parece mucho más grande que Times New Roman, por ejemplo. Además, si simplemente hiciera esto, tamaño del cuerpo = 100%, ¿que significa que será el mismo en todos los navegadores? ¿O solo si primero defino un valor absoluto?

UPDATE Sab Jul 23

Me estoy haciendo allí, pero por favor tengan paciencia conmigo.

Por lo tanto, el valor% se refiere al tamaño de fuente predeterminado del navegador, si entiendo correctamente. Bueno, eso es bueno, pero me da varias otras preguntas:

1. ¿Es este tamaño estándar siempre el mismo para cada versión del navegador, o varían de una versión a otra?
2. I! encontró (vea la imagen a continuación) la configuración de Google Chrome (¡nunca lo había visto antes!), y veo las configuraciones 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 tiene la fuente "Georgia" un tamaño estándar para el navegador
3. En varios sitios web I read 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?

Google Configuración:

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

Answer 1

El navegador por defecto, que es algo así como 16 puntos para Firefox, se puede comprobar por entrar en las opciones de Firefox, al hacer clic en la pestaña Contenido, y comprobando el tamaño de la fuente. Usted puede hacer lo mismo para otros navegadores también.

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 voy a establecer el valor predeterminado CUERPO, así:

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 letra de 14px.

decir que quiero a todos los divs que tienen un tamaño de fuente 10% más grande que el cuerpo, yo simplemente hago:

div { 
    font-size: 110% 
} 

Ahora cualquier navegador que ver más páginas se autmoatically hacer todos los divs 10% más grande que eso del cuerpo, que debería ser algo así como 15.4px.

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

div { 
    font-size: 90% 
} 

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

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

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

El div interior 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

Answer 2

Es en relación con el navegador por defecto de la fuente de tamaño menos que lo sustituya con un valor en puntos o píxeles.

Answer 3

En relación al tamaño predeterminado definido para esa fuente.

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

Answer 4

Mi entendimiento es que cuando la fuente se establece de la siguiente manera

body { 
    font-size: 100%; 
} 

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

La especificación dice que% se representa

en relación con el tamaño de fuente del elemento padre

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

En este caso, retiro lo dicho en el sentido de lo que el navegador está configurado para.

Answer 5

un porcentaje en el valor de la propiedad font-size es relativo a tamaño de la fuente del elemento padre. CSS 2.1 dice esto oscura y confusamente (refiriéndose al "tamaño de fuente heredado"), pero el texto de CSS3 says es muy claro.

El elemento primario del elemento body es el elemento raíz, es decir, el elemento html. A menos que se establezca en una hoja de estilos, 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 font-size: 100% no tiene sentido en muchos casos, ya que un elemento hereda el tamaño de fuente de sus padres (que conduce al mismo resultado), si ninguna hoja de estilos 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 elemento input normalmente tiene una configuración en la hoja de estilos del navegador, lo que hace que su tamaño de fuente predeterminado sea más pequeño que el del texto de copia. Si usted desea hacer el tamaño de fuente de la misma, se puede establecer

de entrada {font-size: 100%}

Para el elemento body, el ajuste font-size: 100% lógicamente redundante se utiliza con bastante frecuencia, ya que se cree para ayudar contra algunos errores del navegador (en buscadores que probablemente ya hayan perdido su significado).

Answer 6

Lo siento si llego tarde a la fiesta, pero en su edición hace un comentario sobre font: 100% Georgia, que las otras respuestas no han respondido.

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

Eso es todo. Las otras respuestas ya mencionaron todo lo demás que hubo que mencionar.

Answer 7

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

Creo que font-size: 100%; puede ser muy útil cuando se combina con el diseño basado en em. Como muestra this article, esto creará un sitio web muy flexible.

¿Cuándo es útil? Cuando su sitio necesita adaptarse a los deseos de los visitantes. Tomemos como ejemplo a un anciano que pone su tamaño de fuente predeterminado a 24 px. O alguien con una pequeña pantalla con una gran resolución 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án, pero los sitios basados ​​en em pueden hacer frente a estas situaciones.

Answer 8

En mi opinión, ayuda a que su contenido se ajuste con diferentes valores de familia de fuentes y tamaños de fuente. De este modo, hace que su contenido sea escalable. En cuanto a la cuestión del tamaño de fuente inherente siempre podemos anular dando un tamaño de fuente específico para el elemento.

Answer 9

Según ALL La datación SPECS VOLVER AL 1996, los valores porcentuales de font-size se refiere a (computarizada) tamaño de fuente del elemento padre.

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

Así de fácil.

¿Qué pasa si el div declara un tamaño de fuente relativo, como em s, o peor, otro porcentaje? Ver "calculado" arriba. Cualquier unidad absoluta a la que se convierte la unidad relativa.

La única pregunta que queda es lo que sucede cuando se utiliza un valor de porcentaje sobre el elemento raíz, que no tiene padre:

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

En ese caso, consulte the “duplicate” 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)
• CSS 2.1 spec (2011)
• CSS Fonts Level 3 spec (2013)
• CSS Fonts Level 3 editor’s draft (2017)