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

There are a couple of situations this can be useful-

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())


I believe the M-principle is a myth. At the very least the following documentation from http://www.w3.org/TR/CSS21/syndata.html proves that calculations based on the M-principle are overly complicated and unnecessary.

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)

From this documentation the following are true.

  1. Without ancestor magnification, 1em is exactly equal to the pixel font size.

  2. Since ancestor magnification with ems and percent works in well defined ways a simple loop will calculate exact font sizes, assuming: no C.S.S; and some ancestor has it's font size set in absolute units.

  3. Since ems measure width you can always compute the exact pixel font size by creating a div that is 1000 ems long and dividing its client-Width property by 1000. I seem to recall ems are truncated to the nearest thousandth, so you need 1000 ems to avoid an erroneous truncation of the pixel result.

  4. You probably can create a font where the M-principle fails since em is based on the font-size attribute not on the actual font. Suppose you have a weird font where M is 1/3 the size of the other characters and you have a font size of 10 pixels. I kind of think the font-size is a guarantee of maximal character height and so the M will not be 10 pixels and all other characters 30 pixels.


It can be done using this line of code:

const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])
  1. window.getComputedStyle(document.body) - to get all the styles for body
  2. getPropertyValue('font-size') - to get a string value of font-size, example: (16px)
  3. match(/\d+/)[0]) - to get only a number part, example: (16) - string
  4. Number(...) - to convert number part into a number, example: (16) - number