css - rem - tamaño de letra html5

¿Usando el porcentaje para el tamaño de fuente?

Question

Recientemente he leído bastante sobre el cambio de tamaño de las fuentes, la mayoría de las cuales ridiculiza el uso de px como un crimen imperdonable (vale, tal vez no tan mal, entiendes la idea) porque no cambia el tamaño correctamente en los navegadores más antiguos.

Realmente quiero tener un estándar que uso, en el pasado que ha sido px, simplemente porque es simple, fácil de entender y bastante fácil de lograr los tamaños de fuente exactos que se especifican en los diseños, pero ahora estoy dudando de usar px.

Recientemente utilicé em en un proyecto porque necesitaba una funcionalidad de cambio de tamaño del texto que hice usando jQuery. Pero me pareció bastante frustrante debido a la forma en que em amplifica si tienes dos elementos dentro de la otra, ambos con un tamaño de em especificado (espero que tenga sentido)

Así que me preguntaba sobre el uso de% para el cambio de tamaño de fuente, he visto un par de grandes sitios web usar esta técnica (es decir, Yahoo) y por lo que entiendo parece tener todas las ventajas de em sin la amplificación increíblemente molesta.

En resumen, me pregunto si hay algún problema con el uso de% para el tamaño de fuente en CSS. ¿Sería mejor que usar PX en términos de cambio de tamaño de fuente? ¿Y hay algún inconveniente notable?

Disculpas si la propaganda antes de la pregunta es un poco: / Todavía me estoy acostumbrando a todo el asunto de la garantía de calidad

Answer 1

El estándar en diseño web hasta donde yo lo he experimentado es usar un porcentaje para establecer el tamaño de la fuente en el cuerpo, luego usar ems para cambiar el tamaño de la fuente después de eso. Podría usar porcentajes fuera de la etiqueta corporal sin efectos secundarios adversos, pero creo que a muchos desarrolladores les resulta más fácil trabajar con ems (cualquiera puede consultarme sobre esto).

El peligro viene si usas ems para establecer el tamaño de fuente del cuerpo; los navegadores más antiguos se ahogan y muestran incorrectamente el texto, especialmente cuando se utiliza el zoom.

Answer 2

En CSS3, usa rem (root em ). El tamaño em del elemento padre no afectará al tamaño.

Answer 3

Hay un complemento jQuery llamado FitText . Cambia el tamaño del texto basado en porcentajes. Si el visitante por alguna razón tiene JavaScript desactivado, se mostrará de manera normal, por lo tanto, establezca una copia de seguridad PX o EM razonable.

Depende de jQuery, por lo que deberá incluirlo en su página (si aún no lo tiene).

jquery.fittext.js para referencia:

/*global jQuery */
/*! 
* FitText.js 1.0
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license 
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/

(function( $ ){

    $.fn.fitText = function( kompressor, options ) {

        var settings = {
        ''minFontSize'' : Number.NEGATIVE_INFINITY,
        ''maxFontSize'' : Number.POSITIVE_INFINITY
      };

            return this.each(function(){
                var $this = $(this);              // store the object
                var compressor = kompressor || 1; // set the compressor

        if ( options ) { 
          $.extend( settings, options );
        }

        // Resizer() resizes items based on the object width divided by the compressor * 10
                var resizer = function () {
                    $this.css(''font-size'', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
                };

                // Call once to set.
                resizer();

                // Call on resize. Opera debounces their resize by default. 
        $(window).resize(resizer);

            });

    };

})( jQuery );

Answer 4

Tal vez tenga más sentido hacer un script de cambio de tamaño de fuente. Hice un guión que hizo exactamente lo que deseas, pero no puedo encontrarlo más.

Pseudo-código:

var fontSize = 15; // (em) input
var fontResize = -1;// (em)input
fontSize = fontSize+fontResize; //current div

for(every inherent parent classname == ''classname-em'')
document.classnameParentSize[numberofclass] = classnameChildSize[numberOfClass]/100*90;

Así que explicado en palabras. La secuencia de comandos necesita cambiar el tamaño de algunas fuentes, cuando se hace eso también buscará que algunos padres divs para cambiar el tamaño de esas fuentes, a excepción de que se redimensionará un 10% menos de lo que es inherente. Con un poco de desconcierto tendrás la conversión correcta. También trate de evitar los rellenos y el ancho de los bordes.

Answer 5

intenta usar esto

body {
  margin: 0px;
  padding: 0px;
  font-size: 62.5%;
}

body>#wrapper {
  font-size:1em;
}

Entonces, cuando diga algo como 1em dentro del "contenedor", tendrá un tamaño muy similar a 10px. aquí hay una tabla de ejemplo:

3em == 30px
.5em == 5px
8.5em == 85px

Esto te ayudará en la transición

Pd: por supuesto, necesitas una etiqueta de envoltura después del cuerpo