如何使用JavaScript或JQuery获得默认字体大小（以像素为单位）？

正如您所知，em是一种相对字体度量，其中一个em等于默认字体大小中字母“M”的高度。使用它的一个优点是，您可以调整文本的大小

但如何使用JavaScript或JQuery获得当前环境的默认字体大小（以像素为单位）

---

关于，

尽管看起来获取默认字体大小可能是个好主意——如果是设置页面的布局之类的，让用户来处理可能是更安全的做法

---

如果他们的字体更大，那是因为他们是盲人，反之亦然。我建议您设置默认值并“推荐”分辨率/大小。除非你的应用程序依赖于它，否则让用户来处理它。

我在过去见过/使用的一个技巧是渲染一些文本（比如50个任意字符，或Ms），然后测量渲染容器的大小，并计算出单个字符的高度和宽度。这就是你想要的吗？您可以在后台进行渲染，以便用户看不到它

这在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>

函数getStyle（el、styleProp）
{
var x=document.getElementById（el）；
if（x.currentStyle）
变量y=x.currentStyle[styleProp]；
else if（window.getComputedStyle）
var y=document.defaultView.getComputedStyle（x，null）.getPropertyValue（styleProp）；
返回y；
}
函数GetSt（）
{
var font_size=getStyle（“div2”、“fontSize”）；
警报（字体大小）；
}
测试
点击

使用jQuery（假设您需要特定元素的字体大小）：

var originalFontSize=$（'your#element_id_here'）.css（'font-size'）

如果您使用的是Prototype和jQuery，则需要使用jQuery前缀而不是美元符号：

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

---

这将以字符串形式返回值，如：16px。

有几种情况下，这可能很有用-

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（））我认为M原则是一个神话。至少以下文件证明，基于M-原理的计算过于复杂且不必要

“em”单位等于计算出的 的“字体大小”属性的值 在其上使用的元素。这个 例外情况是当“em”出现在 “字体大小”属性的值 在这种情况下，它指的是 父元素的字体大小。信息技术 可用于垂直或水平方向 测量。（本单元也是 有时称为“四边形宽度” 印刷文本。）

根据本文档，以下内容是正确的

如果没有祖先放大，1em正好等于像素字体大小

由于使用ems和percent的祖先放大以定义良好的方式工作，一个简单的循环将计算精确的字体大小，假设：无C.S.S；有些祖先的字体大小是以绝对单位设置的

由于ems测量宽度，您始终可以通过创建长度为1000 ems的div并将其客户端宽度属性除以1000来计算精确的像素字体大小。我似乎记得ems被截断到最接近的千分之一，所以需要1000个ems来避免错误地截断像素结果

您可能可以创建一种M原则失败的字体，因为em基于字体大小属性，而不是实际字体。假设您有一个奇怪的字体，其中M是其他字符大小的1/3，并且您的字体大小为10像素。我有点认为字体大小是最大字符高度的保证，因此M不会是10像素，所有其他字符都不会是30像素

---

我想这就是你想要的：

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在代码中的其他任何地方（可能在某些css中）具有不同的fontSize Decelleration，则函数将返回该值。例如：

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

body{font size:20px；}
函数getDefaultFontSize（）{
defsize=（document.body.style.fontSize）
} 

上面返回的fontSize值为20px。

---

---

经过全面测试，适用于我（chrome 22.0.1229.94 m和firefox 13.01）。

可以使用以下代码行完成：

const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])

window.getComputedStyle（document.body）

-获取body的所有样式

getPropertyValue（'font-size'）

-获取字体大小的字符串值，例如：（16px）

匹配（/\d+/）[0]）

-仅获取数字部分，例如：（16）-字符串

Number（…）

-将数字部分转换为数字，例如：（16）-数字

---

如果使用

rem

作为单位，则默认的“字体大小”需要取自

，而不是正文或其他

---

alert（window.getComputedStyle（document.documentElement.getPropertyValue（'font-size'））

这听起来是个好主意，但我认为还有另一个很好的解决方案。事实上，这正是目前的做法。如上所述：假设您需要特定元素的字体大小。不，不。我只想要当前环境的默认字体大小。这上面的

宽度对我来说是错误的（它是页面宽度）。将其从
div
更改为
span
可以修复此问题。我的
html
元素的字体大小为100%（即，无论浏览器的设置如何），并且网站上的所有其他大小都在
em
中声明，这有关系吗？上面的代码给出了px的字体大小，对吗？这是可以自由互换的吗？我找不到宽度为1米的通用网页字体。Georgia是最接近的，但使用getComputedStyle（）['font-size']时，M仍然小于1em.+1而不是创建一个虚拟元素。但是-1用于使用
currentStyle
，它是您为其指定的同一
getComputedStyle
函数的专有变量：）元素的
style
对象属性仅包含以下样式属性（例如
font size
）