css - estilos - tamaño de letra html
CSS: tamaño de fuente 100%-¿100% de qué? (9)
Hay many articles y questions sobre fuentes de tamaño porcentual vs de otro tamaño . 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 (%): la unidad de porcentaje es muy parecida 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 dices "es decir, 12 pt = 100%", entonces significa que primero tienes 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 poner:
body {
font-size: 100%;
}
Entonces al hacer esto, ¿CUÁL es el tamaño de letra relativo? 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 solo hiciera esto, tamaño del cuerpo = 100%, ¿ eso significaría que será el mismo en todos los navegadores? ¿O solo si primero defino un valor absoluto?
ACTUALIZACIÓN, SAT 23 DE JULIO
Estoy llegando allí, pero por favor tengan paciencia conmigo.
Entonces, el valor% se relaciona con el tamaño de letra predeterminado del navegador, si entiendo correctamente. Bueno, eso es bueno, pero me da varias otras preguntas:
- ¿Es este tamaño estándar siempre el mismo para cada versión de navegador, o varían entre versiones?
- YO ! 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" como tamaño estándar para el navegador? - En varios sitios web many 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?
Configuración de Google:
Así es como creo que podrían verse las cosas si no se define el tamaño en valores absolutos.
Como lo demostró convincentemente, el font-size: 100%; no se renderizará 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 em diseño basado en em . 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 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.
De acuerdo con TODAS LAS ESPECIFICACIONES QUE VENGAN A REGRESAR A 1996 , los valores porcentuales sobre font-size refieren al font-size del elemento principal (calculado) .
<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 el div declara un tamaño de letra relativo, como em , o peor, otro porcentaje? Ver "computado" arriba. Cualquier unidad absoluta a la que se convierte 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
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. Usted puede hacer lo mismo para otros navegadores también.
Personalmente me gusta controlar el tamaño de letra predeterminado de mis sitios web, así que en un archivo CSS que se incluye en cada página estableceré el BODY predeterminado, 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.
Digamos que quiero que todos los divs tengan un tamaño de letra un 10% más grande que el cuerpo, simplemente lo 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, que debería ser algo así como 15.4 px.
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 letra 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%, entonces:
<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
En cuanto a mi comprensión, ayuda a que su contenido se ajuste con diferentes valores de familia de fuentes y tamaños de fuente. Por lo tanto, 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.
Es relativo al tamaño de fuente del navegador predeterminado a menos que lo sobrescriba con un valor en pt o px.
Lo siento si llego tarde a la fiesta, pero en su edición hace un comentario sobre la font: 100% Georgia , que las otras respuestas no han respondido.
Hay una diferencia entre la font: 100% Georgia y font-size:100%; font-family:''Georgia'' 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: la altura de la línea se vuelve 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.
Mi entendimiento es que cuando la fuente se establece de la siguiente manera
body {
font-size: 100%;
}
el navegador renderizará la fuente según la configuración del usuario para ese navegador.
La especificación dice que se representa%
relativo al tamaño de letra del elemento principal
http://www.w3.org/TR/CSS1/#font-size
En este caso, tomo eso para decir en qué está configurado el navegador.
Relativo al tamaño predeterminado definido para esa fuente.
Si alguien abre su página en un navegador web, hay una fuente predeterminada y el tamaño de fuente que usa.
Un porcentaje en el valor de la propiedad de font-size es relativo al tamaño de fuente del elemento principal . CSS 2.1 dice esto oscura y confusamente (refiriéndose al "tamaño de fuente heredado"), pero el Texto CSS3 lo says muy claramente.
El padre del elemento del 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.
Configuración font-size: 100% tiene sentido en muchos casos, ya que un elemento hereda el tamaño de fuente de su principal (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 elemento de 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 de copiar texto. Si desea que el tamaño de la fuente sea el mismo, puede establecer
entrada {font-size: 100%}
Para el elemento del body , el font-size: 100% lógicamente redundante font-size: 100% se usa con bastante frecuencia, ya que se cree que ayuda contra algunos errores del navegador (en buscadores que probablemente ya hayan perdido su significado).