¿Utiliza el porcentaje del tamaño de letra?

Question

He leído bastante sobre el cambio de tamaño de las fuentes recientemente, la mayoría ridiculizando 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 navegadores 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 letra exactos que se especifican en los diseños, pero me ' Ahora estoy dudando de usar px.

Utilicé em en un proyecto recientemente 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 tiene dos elementos uno dentro del otro con un tamaño de em especificado (espero que tenga sentido)

Me preguntaba si usar% para cambiar el tamaño de la fuente, I He visto un par de grandes sitios web utilizar esta técnica (es decir, Yahoo) y por lo que entiendo parece tener todas las ventajas de em sin la cosa de amplificación increíblemente molesto.

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 que la pregunta es un poco más:/Todavía estoy acostumbrando a todo el asunto de control de calidad

Answer 1

Tal vez se presente más sentido de hacer un script font-cambiar el tamaño. He hecho una secuencia de comandos 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í se explica 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 2

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 3

intentar usar esta

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

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

así, cuando se dice algo así como 1 em el interior de la "envoltura" que tendrá un tamaño muy similar a 10px. he aquí una tabla de ejemplo:

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

Esto le ayudará en la transición

P.d: por supuesto, necesita una etiqueta de contenedor después del cuerpo

Answer 4

El estándar en el diseño web hasta donde yo lo he experimentado es usar un porcentaje para establecer el tamaño de fuente en el cuerpo, luego usar ems para cambiar el tamaño de 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 usa 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 5

En CSS3, use rem (raíz em). El tamaño em del elemento padre no afectará al tamaño.