detectar el tamaño de fuente del navegador

Question

¿Es posible detectar el tamaño de fuente del navegador? ¿También es posible dedect nuevo tamaño de fuente cuando el usuario cambia el tamaño de fuente desde la selección del menú? Muchas gracias por ayudar a todos. Saludos cordiales.

Answer 1

La respuesta corta es no. Sin embargo, sospecho que desea poner diferentes tamaños en diferentes elementos dependiendo del tamaño de fuente del usuario. Si es así, puede consultar las reglas de CSS en "em", que se define como relativo al tamaño de fuente actual.

Answer 2

Bueno, es posible, pero mi cuervo sentado en una bola de cristal me dice que no te diga cómo, sino que te pregunte qué quieres lograr. Lo más probable es que desee que una página web se vea bien sin importar el tamaño de la fuente. Por eso, recomiendo el CSS units em, ex etc.

Answer 3

¿Es posible detectar el tamaño de letra del navegador?

Un poco, pero rara vez es una buena idea hacerlo. Suponiendo < body> no tiene el tamaño de fuente establecido y no hay reglas de interferencia (como ‘div cuerpo’):

var measure= document.createElement('div'); 
measure.style.height= '10em'; 
document.body.appendChild(measure); 
var size= measure.offsetHeight/10; 
document.body.removeChild(measure); 

le da el tamaño en píxeles de 1 em.

¿También es posible dedect nuevo tamaño de fuente cuando el usuario cambia el tamaño de fuente desde la selección del menú?

No directamente, pero puede sondear la función de un medidor de la misma forma cada cierto tiempo. En IE, puedes colgar la marca de una expresión CSS(), ya que recalculan cuando se cambia el tamaño de la fuente (entre muchas otras veces), pero probablemente no valga la pena (aún necesitarías el sondeo para otros navegadores y expresión () está en desuso de todos modos).

Answer 4

Por lo que yo sé, no hay una manera de averiguarlo. Simplemente asume que el tamaño predeterminado es 16 píxeles, que es el estándar.

La mejor práctica es establecer todos los tamaños de fuente en ems que se escalan según el tamaño de fuente base.

La mayoría de las personas establece la fuente base en 10 píxeles, lo que facilita el trabajo con ems.

Ejemplo

16px = 1 em

p { 
    font-size:2em; 
} 

Eso sería igual 32px

---

10px = 0.625em

body { 
    font-size:0.625em; 
} 

p { 
    font-size:2em; 
} 

Eso equivaldría a 20px;

Espero que haya sido de ayuda.

Answer 5

Mi motivación para supervisar los cambios de tamaño de texto es cambiar dinámicamente la altura (o el ancho) de los elementos para que toda la página no requiera barras de desplazamiento de la ventana del navegador. Normalmente, cuando haces esto respondes al evento de cambio de tamaño, pero los cambios en el tamaño de la fuente también pueden afectar tus cálculos.No me importa mucho el tamaño real de la fuente, solo necesito saber cuándo cambia.

Aquí hay algunos códigos jQuery que uso. Esto es similar a la solución sugerida por bobince. que tienen una función de cambio de tamaño que actualizará la altura de un div etc.

$(window).resize(resize); // update when user resizes the window. 

$("body").append("<p id='textSizeReference' style='display:none;padding:0'>T</p>"); 
var refTextHeight = $("#textSizeReference").height(); 
setInterval(function() { 
    var h = $("#textSizeReference").height(); 
    if (h != refTextHeight) { 
     refTextHeight = h; 
     resize(); // update when user changes text size 
    } 
}, 500); 

Si esta es una aplicación Ajax que interroga sobre cambios en location.hash se puede utilizar la misma función de votación para el cambio de tamaño de texto.

Answer 6

Aquí es algo que he encontrado que funciona bien para la detección de familia de la fuente actual del documento en el IE:

document.documentElement.currentStyle [ "fontFamily"]

en Firefox/Opera:

Hay es un método llamado getComputedStyle que se supone que devuelve el estilo css para un elemento determinado dado, pero no he encontrado una forma de que regrese en todo el documento todavía.

Espero que esto ayude un poco!

Answer 7

necesitaba lo mismo. aquí encontré la mejor respuesta.

https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle