CSS: tamaño de fuente: heredar * 70%?

Question

¿Hay alguna forma de especificar el tamaño de fuente para que una clase sea, digamos, el 70% del tamaño de fuente heredado?

Tengo un " botón general " clase que configura mis botones con los bordes, el fondo, etc. adecuados. Lo uso en varios lugares, incluido uno donde el tamaño de fuente es bastante pequeño y otro donde el tamaño de fuente es bastante grande.

<div style="font-size: 26px;">
Push this: <input class="button" type="submit" value="Go">
</div>
<div style="font-size: 10px;">
Push this too: <input class="button" type="submit" value="Go">
</div>

En ambos casos, me gustaría que el tamaño de fuente del botón sea aproximadamente el 70% del tamaño de fuente del intervalo o div en el que se encuentra el botón.

¿Puedo hacer esto con CSS puro?

Answer 1

Los EM funcionan como porcentajes en que el tamaño de fuente base es siempre 1em y .7em sería el 70% de eso (de la misma manera, 1.2em sería equivalente al 120% del tamaño de fuente base). Para que esto funcione correctamente, debe definir un tamaño de fuente base en el cuerpo del documento. A través de la experimentación he encontrado que el tamaño de fuente: 77%; le ofrece un buen tamaño base en todos los navegadores (es decir, hace que 1em se renderice en un tamaño normal y legible). Es posible que desee probar otros valores entre 75% y 80% dependiendo de la familia de fuentes que desee usar. También tenga en cuenta que los tamaños de fuente relativos se heredan de forma acumulativa, por ejemplo:

<style>
small { font-size: .8em; }
span.tiny { font-size: .8em } 
</style>

<small>This text is 80% of base size where as 
    <span class="tiny">this text is 80% of 80% (or 64%) of base size</span>
</small> 

Esto funciona a su favor, ya que solo necesitaría darle a su clase de botones un tamaño de fuente de .7em para lograr lo que desea (los botones siempre tendrán un tamaño de fuente que sea el 70% de su objeto principal). ¡Feliz codificación!

edición 2014:

Vale la pena señalar que el soporte del navegador para la unidad Root EM ahora es tan bueno * que si aún no lo está utilizando, vale la pena analizarlo. El Root EM (rem) está vinculado al tamaño de fuente raíz (documento), y a diferencia del " normal " EM no se ve afectado por el anidamiento; siempre se relaciona con el tamaño de fuente raíz. Si bien los em siguen siendo muy útiles para la mayoría del tamaño del texto, precisamente porque sí respeta la anidación, el rem es ideal para cosas como márgenes y relleno, que es posible que no desee cambiar el tamaño con anidamiento (esta es una causa común de márgenes izquierdos desalineados), pero que sí desea cambiar el tamaño junto con la raíz html tamaño de fuente (generalmente usando consultas de medios ).

Puede leer más sobre EMs vs REMs en Design Shack .

*) IE8 es el único navegador común (~ 5%) que no lo admite; si necesita admitir IE8, simplemente incluya un tamaño equivalente en píxeles antes el rem declaración.

Answer 2

En CSS, si da una unidad relativa, es por defecto relativa al tamaño del que hereda. Eso significa que podría definir el tamaño de fuente del botón como "70%".

También hay otras dos unidades relativas a la mano para tamaños de fuente: em y ex. 1 em es el ancho de la letra 'M', 1 ex la altura de la letra 'x', obviamente también heredada.

No debe usar px como tamaño de fuente, como en su ejemplo. px no obedece el DPI de la pantalla. Por ejemplo, en mi pantalla, ambos 10px y 26px serían pequeños. Debería usar 'pt' en su lugar, o incluso comenzar con 'em'.

Answer 3

Prueba:

font-size: 0.7em;

Aquí hay más información: Cómo ajustar el tamaño del texto en CSS en una lista aparte

Answer 4

<input style="font-size: 70%" class="button" type="submit" value="Go">

?