JavaScriptまたはJQueryを使用してデフォルトのフォントサイズをピクセル単位で取得するにはどうすればよいですか？

Question

あなたが知っているように、emは相対フォント測定で、emはデフォルトフォントサイズの文字「M」の高さに等しい。それを使用する利点は、テキストのサイズを変更できるためです。

JavaScriptやJQueryを使って、現在の環境のデフォルトフォントサイズ（ピクセル単位）を取得するにはどうすればよいですか？

に関して、

Answer 1

状況のカップルは、私はM-原理は神話であると信じて、これは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; 
} 

警告（getDefaultFontSize（））

Answer 2

デフォルトのフォントサイズを取得することは良い考えかもしれないように思えるが、 - それはあなたのページと、そのようなレイアウトを設定するなら、それだけでユーザーがいることを処理させるために、おそらくより安全勧めします。

フォントサイズが大きい場合は、ブラインドでブラインドで、逆も同様です。デフォルトを設定し、解像度/サイズを「推薦する」ことをお勧めします。あなたのアプリケーションがそれに依存している場合を除き、ユーザーがそれを処理させてください。

Answer 3

これまで私が見たことのあるトリックは、何らかのテキスト（たとえば50の任意の文字またはM）をレンダリングし、レンダリングされたコンテナのサイズを測定し、その高さと幅を計算する単一の文字。これはあなたのために行くのですか？バックグラウンドでレンダリングを行うことができ、ユーザーはそれを見ることができません。

Answer 4

これはFFで動作します。 jQueryのを使用して

<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 5

（あなたが特定の要素のフォントサイズをしたいと仮定して）：

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

あなたはプロトタイプだけでなく、jQueryのを使用している場合は、代わりにドル記号のjQueryの接頭辞を使用することをお勧めします：

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

これはそうのような文字列として値を返します：16pxに。

Answer 6

ことができるがあります。少なくともhttp://www.w3.org/TR/CSS21/syndata.htmlの以下の文書は、M-原理に基づく計算が過度に複雑で不必要であることを証明している。

「日」ユニットは、それが使用されている 要素の「フォントサイズ」プロパティの計算 値に等しいです。 例外は 'font-size'プロパティ 自体の 値に 'em'がある場合です。この場合、親要素のフォントサイズは です。水平 の測定には を使用できます。

この文書から、（このユニットはまた、 時々 活版印刷のテキストでクワッド幅と呼ばれる。）で、以下の該当します。

1. 祖先の倍率がない場合、1emはピクセルフォントのサイズとまったく同じです。

2. emsとpercentを使用して祖先の倍率が明確に定義された方法で機能するため、単純なループでは正確なフォントサイズが計算されます。いくつかの祖先にはフォントサイズが絶対単位で設定されています。

3. ems measure widthは、1000 emsのdivを作成し、そのclient-Widthプロパティを1000で割って、正確なピクセルフォントサイズを計算することができます。emsは1000番目に切り捨てられますピクセル結果の誤った切り捨てを避けるために1000 emが必要です。

4. emは実際のフォントではないfont-size属性に基づいているため、おそらくM原則が失敗するフォントを作成できます。 Mが他の文字の1/3の大きさで、フォントサイズが10ピクセルの奇妙なフォントがあるとします。私はfont-sizeが文字の高さの最大値を保証していると思うので、Mは10ピクセルでなく、他のすべての文字は30ピクセルではありません。

   私は、これはあなたが探しているものだと思います

Answer 7

：

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 + '"'); 
} 

*体が（おそらくいくつかのCSSの）コードのどこにも異なるのfontSizeのdeclerationを持っている場合、関数はその値を返します。 。例：

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

上記の値は20pxのfontSize値を返します。

---

完全にテストされ、私のために働きます（chrome 22.0.1229.94 m、firefox 13.01）。