Meditas Relativas - Tamaño de fuentes

DoPeY-BBS · #1 (**permalink**) 04/12/2008, 19:11

Código PHP:

  body { 
  font-size: 12px; 
  text-indent: 3em; 
} 
h1 { font-size: 15px }

Cita:

La propiedad text-indent, como se verá en los próximos capítulos, se utiliza para tabular la primera línea de un texto. El elemento <body> define un valor para esta propiedad, pero el elemento <h1> no lo hace, por lo que heredará el valor de su elemento padre. Sin embargo, el valor heredado no es 3em, sino 36px.

Si se heredara el valor 3em, al multiplicarlo por el valor de font-size del elemento <h1> (que vale 15px) el resultado sería 3em x 15px = 45px. No obstante, como se ha comentado, los valores que se heredan no son los relativos, sino los valores ya calculados.

Por lo tanto, en primer lugar se calcula el valor real de 3em para el elemento <body>: 3em x 12px = 36px. Una vez calculado el valor real, este es el valor que se hereda para el resto de elementos.

¿Que se hace con el resultado?

La explicación me es un poco confusa

kazafun · #2 (**permalink**) 05/12/2008, 04:20

Cita:

Iniciado por DoPeY-BBS

Código PHP:

  body { 
  font-size: 12px; 
  text-indent: 3em; 
} 
h1 { font-size: 15px }

¿Que se hace con el resultado?

La explicación me es un poco confusa

se utiliza para tabular la primera línea de un texto

kseso? · #3 (**permalink**) 05/12/2008, 09:28

Hola DoPeY-BBS

Edito:
Comentario eliminado por ser errónea la respuesta ofrecida.

DoPeY-BBS · #4 (**permalink**) 05/12/2008, 14:05

Gracias
Edito:

creo que entendi

¿Por que no expresarlo directamente en px?

para el body 11 pix por ejemplo y para los encabezado usarlo 15x

Mikmoro · #5 (**permalink**) 05/12/2008, 16:46

Puntualizo: el valor de font-size sí se hereda, y en realidad, con tres cajas anidadas, si las tres tienen 0.5em, la primera tendrá digamos 8px, la segunda 4px y la tercera 2px.

Lo que dice en ese manual es que el que no se hereda es el valor de text-indent, usando cualquier elemento el valor calculado en lugar de su propia representación en em de su tamaño.
Cuando asignamos un valor de indentado en em a cualquier elemento, ese valor no será con respecto al propio tamaño del elemento, sino al valor por defecto del navegador.
Si tenemos el navegador configurado con un tamaño de letra por defecto de 16px (1em equivaldrá a 16px), si ponemos un text-indent de 3em a cualquier elemento, sea cual sea el tamaño de letra de ese elemento el indentado se calculará con respecto al valor del tamaño por defecto, en ese caso 48px.

Esto es más o menos lo que viene a decir.

kseso? · #6 (**permalink**) 08/12/2008, 12:17

Se agradece la corrección, Mik.
Una página que acaba de desaparecer de mis favoritos.

DoPeY-BBS · #7 (**permalink**) 08/12/2008, 19:50

Me acabo de enredar (que tapado soy)

Código HTML:

body { font-size: 10px; }
h1 { font-size: 2.5em; }

Cita:

En primer lugar, se establece un tamaño de letra base de 10 píxel para toda la página. A continuación, se asigna un tamaño de 2.5em al elemento <h1>, por lo que su tamaño de letra real será de 2.5 x 10px = 25px.

¿El tamaño real del h1 sera de un 25px? y si es así ¿por qué no introducirlo directamente? o es que si se introduce directamente el resultado seria inesperado

La verdad estoy confundido

webosiris · #8 (**permalink**) 09/12/2008, 15:12

Cita:

Iniciado por DoPeY-BBS

y si es así ¿por qué no introducirlo directamente?

imagina que entre el h1 y el h2 quieres mantener una proporción de 2:1 (osea que el h1 sea el doble que el h2). Si tu lo pones en px y despues quieres cambiar el tamaño, tienes que cambiarlo tanto en el h1 como en el h2 (o perderás la proporción) en cambio con em no, solo cambias el tamaño base y todo se ajusta a ese tamaño, manteniendo las proporciones (es exactamente igual que usar porcentajes)

Mikmoro · #9 (**permalink**) 09/12/2008, 18:22

Y excepto para el caso que apunta webosiris y algún otro que se nos puede ocurrir, usar esto así tiene más bien poco sentido:

body { font-size: 10px; }
h1 { font-size: 2.5em; }

porque si diseñar con "em" sirve principalmente para que el tamaño se ajunte al definido por defecto que tenga el visitante en su navegador, ese código impide que eso ocurra, dando al traste con la accesibilidad que proporciona "em".