¿Cómo puedo obtener el tamaño de fuente predeterminado en píxeles usando JavaScript o JQuery?

StackOverflow https://stackoverflow.com/questions/1442542

Pregunta

Como saben, em es una medida de fuente relativa donde un em es igual a la altura de la letra "M" en el tamaño de fuente predeterminado. Una ventaja de usarlo es que podrá cambiar el tamaño del texto.

Pero, ¿cómo puedo obtener el tamaño de fuente predeterminado del entorno actual (en píxeles) usando JavaScript o JQuery?

saludos,

¿Fue útil?

Solución

Hay un par de situaciones que pueden ser útiles: 

function getDefaultFontSize(pa){
 pa= pa || document.body;
 var who= document.createElement('div');

 who.style.cssText='display:inline-block; padding:0; line-height:1; position:absolute; visibility:hidden; font-size:1em';

 who.appendChild(document.createTextNode('M'));
 pa.appendChild(who);
 var fs= [who.offsetWidth, who.offsetHeight];
 pa.removeChild(who);
 return fs;
}

alert(getDefaultFontSize())

Otros consejos

Creo que el principio M es un mito. Como mínimo, la siguiente documentación de http://www.w3.org/TR/CSS21 /syndata.html demuestra que los cálculos basados ??en el principio M son demasiado complicados e innecesarios.

  

La unidad 'em' es igual a la calculada   valor de la propiedad 'font-size' de   El elemento en el que se utiliza. los   la excepción es cuando 'em' ocurre en el   valor de la propiedad 'font-size'   en sí, en cuyo caso se refiere a la   tamaño de fuente del elemento padre. Eso   puede usarse para vertical u horizontal   medición. (Esta unidad también   a veces llamado el ancho cuádruple en   textos tipográficos.)

De esta documentación se cumple lo siguiente.

  1. Sin aumento de antepasado, 1em es exactamente igual al tamaño de fuente del píxel.

  2. Dado que la ampliación de antepasado con ems y porcentaje funciona de manera bien definida, un bucle simple calculará los tamaños de fuente exactos, suponiendo: no C.S.S; y algún antepasado tiene su tamaño de fuente establecido en unidades absolutas.

  3. Dado que ems mide el ancho, siempre se puede calcular el tamaño exacto de la fuente de píxeles creando un div de 1000 ems de largo y dividiendo su propiedad Client-Width por 1000. Parece que recuerdo que los ems se truncan a la milésima más cercana, por lo que necesita 1000 ems para evitar un truncamiento erróneo del resultado del píxel.

  4. Probablemente pueda crear una fuente donde el principio M falla, ya que em se basa en el atributo de tamaño de fuente no en la fuente real. Suponga que tiene una fuente extraña donde M es 1/3 del tamaño de los otros caracteres y tiene un tamaño de fuente de 10 píxeles. Creo que el tamaño de fuente es una garantía de la altura máxima de los caracteres, por lo que la M no será de 10 píxeles y todos los demás caracteres de 30 píxeles.

Un truco que he visto / usado en el pasado es renderizar texto (digamos 50 caracteres arbitrarios, o Ms) y luego medir el tamaño del contenedor renderizado y hacer los cálculos para calcular la altura y el ancho de un solo personaje ¿Es esto lo que estás buscando? Puede hacer el renderizado en segundo plano para que el usuario no lo vea.

Uso de jQuery (suponiendo que desea el tamaño de fuente de un elemento específico):

var originalFontSize = $ ('# your_element_id_here'). css ('font-size') ;

Si usa Prototype y jQuery, querrá usar el prefijo jQuery en lugar del signo de dólar: 

var originalFontSize = jQuery('#your_element_id_here').css('font-size');

Esto devolverá el valor como una cadena así: 16px.

Se puede hacer usando esta línea de código: 

const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])
  1. window.getComputedStyle (document.body) - para obtener todos los estilos para el cuerpo
  2. getPropertyValue ('font-size') - para obtener un valor de cadena de font-size, ejemplo: (16px)
  3. match (/ \ d + /) [0]) - para obtener solo una parte numérica, por ejemplo: (16) - string
  4. Número (...) - para convertir la parte del número en un número, por ejemplo: (16) - número

Aunque parece que obtener el tamaño de fuente predeterminado podría ser una buena idea, si se trata de establecer el diseño de sus páginas y tal, probablemente sea una práctica más segura dejar que el usuario maneje eso.

Si tienen un tamaño de fuente más grande, es porque son ciegos y viceversa. Recomiendo configurar sus valores predeterminados y 'recomendar' una resolución / tamaño. A menos que su aplicación dependa de ella, deje que el usuario la maneje.

Esto funciona en FF. 

<script>
function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

function GetSt()
{
    var font_size = getStyle("div2","fontSize"); 
    alert ( font_size );
}

</script>
<div id="div1" style="height: 100px;font-size: 20px;">
<div id="div2" style="font-size: 2em;">
test
</div>
</div>
<button onclick="GetSt();">Click</button>

Creo que esto es lo que estás buscando: 

function getDefaultFontSize () {
// this will return the default* value assigned to the style: fontSize
defsize=(document.body.style.fontSize)
alert('The default font size of your browser is: "' + defsize + '"');
}

* Si el cuerpo tiene una declinación fontSize diferente en cualquier otro lugar del código (quizás en algunos CSS), la función devolverá ese valor. Por ejemplo: 

<style>body{font-size:20px;}</style>
<script>function getDefaultFontSize () {
defsize=(document.body.style.fontSize)
} </script>

Lo anterior devolverá un valor de fontSize de 20px.

Completamente probado y funciona para mí (Chrome 22.0.1229.94 my Firefox 13.01).

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top