15

ご存知のように、emは相対的なフォント測定値であり、1つのemはデフォルトのフォントサイズの文字「M」の高さに等しくなります。これを使用する利点は、テキストのサイズを変更できることです。

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

よろしく、

4

9 に答える 9

21

これが役立つ状況がいくつかあります-

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（））

于 2009-09-18T12:55:53.490 に答える
10

これは、次のコード行を使用して実行できます。

const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])
  1. window.getComputedStyle(document.body)-ボディのすべてのスタイルを取得するには
  2. getPropertyValue('font-size')-font -sizeの文字列値を取得するには、例：（16px）
  3. match(/\d+/)[0])-数値部分のみを取得するには、例：（16）-文字列
  4. Number(...)-数値部分を数値に変換するには、例：（16）-数値
于 2018-03-15T12:20:48.460 に答える
6

Mの原則は神話だと思います。少なくとも、http：//www.w3.org/TR/CSS21/syndata.htmlからの次のドキュメントは、M-principleに基づく計算が非常に複雑で不要であることを証明しています。

'em'単位は、それが使用される要素の'font-size'プロパティの計算値と同じです。例外は、「font-size」プロパティ自体の値に「em」が含まれている場合です。この場合、親要素のフォントサイズを参照します。垂直または水平の測定に使用できます。（この単位は、活版印刷のテキストではクワッド幅と呼ばれることもあります。）

このドキュメントから、次のことが当てはまります。

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

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

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

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

于 2010-12-25T13:02:36.953 に答える
3

私が過去に見た/使用したトリックの1つは、テキスト（たとえば、任意の50文字またはMs）をレンダリングしてから、レンダリングされたコンテナーのサイズを測定し、計算を行って1つの文字の高さと幅を計算することです。これはあなたが何をしようとしているのですか？ユーザーに表示されないように、バックグラウンドでレンダリングを行うことができます。

于 2009-09-18T04:34:11.060 に答える
3

jQueryの使用（特定の要素のフォントサイズが必要であると想定）：

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

jQueryだけでなくPrototypeも使用している場合は、ドル記号の代わりにjQueryプレフィックスを使用することをお勧めします。

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

これにより、値が次のような文字列として返されます：16px。

于 2009-09-18T06:57:28.883 に答える
1

デフォルトのフォントサイズを取得するのは良い考えのように思えますが、ページのレイアウトなどを設定する場合は、ユーザーにそれを処理させる方がおそらく安全です。

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

于 2009-09-18T04:16:54.673 に答える
1

これは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>
于 2009-09-18T05:25:51.337 に答える
1

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

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

* bodyのfontSizedeclerationがコード内の他の場所（おそらく一部のcss）にある場合、関数はその値を返します。例えば：

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

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

完全にテストされ、私のために動作します（chrome 22.0.1229.94mおよびfirefox13.01）。

于 2012-10-19T20:54:15.933 に答える
1

単位として使用する場合、デフォルトの「font-size」は、bodyやその他remからではなく、から取得する必要があります。<html>

alert(window.getComputedStyle(document.documentElement).getPropertyValue('font-size'))

于 2020-12-23T14:12:10.987 に答える