How can i get default font size in pixels by using JavaScript or JQuery ?

Question

Hi,

As you know em is a relative font measurement where one em is equal to the height of the letter "M" in the default font size. An advantage in using it is because you will be able to resize the text.

But how can i get default font size of current environment (in pixels) by using JavaScript or JQuery ?

regards,

Answer 1

Although it seems like getting the default font size might be a good idea -- if it's to set the layout of your pages and such, it's probably a safer practice to just let the user handle that.

If they have their font size larger - it's because they're blind and vice versa. I'd recommend setting your defaults and 'recommending' a resolution/size. Unless your app depends on it -- let the user handle it.

Answer 2

One trick I've seen/used in the past is to render some text (say 50 arbitrary characters, or Ms) and then measure the size of the rendered container and do the math to figure out the height and width of a single character. Is this what you're going for? You can do the rendering in the background so the user doesn't see it.

Answer 3

This works in 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>

Answer 4

Using jQuery (assuming that you want the font size of a specific element):

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

If you're using Prototype as well as jQuery, you'll want to use the jQuery prefix instead of the dollar sign:

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

This will return the value as a string like so: 16px.

Answer 5

There are a couple of situations this can be useful-

/*
css
.defaultEm:{
  font-size:1em;
  position:absolute;
  line-height:1;
  padding:0;
  visibility:hidden}

*/

function getDefaultFontSize(pa){
 pa= pa || document.body;
 var who= document.createElement('div');
 who.className= 'defaultEm';
 who.appendChild(document.createTextNode('M'));
 pa.appendChild(who);
 var fs= [who.offsetWidth, who.offsetHeight];
 pa.removeChild(who);
 return fs;
}

alert(getDefaultFontSize())