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

Question

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

javascriptjquerycssfontsfont-size

18

如您所知，em是一种相对字体测量单位，其中一个em等于默认字体大小中字母"M"的高度。使用它的优势在于可以调整文本大小。

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

谢谢。

- Arthur Ronald

我很惊讶地发现这里没有本地的Web API！在样式需要依赖于字体大小的情况下，这非常重要。开发人员往往会覆盖浏览器的默认字体大小并使用它，但这对于可访问性来说是一个糟糕的选择。 - Mattias Martens

9个回答

19

可以使用以下代码实现：

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

window.getComputedStyle(document.body) - 获取body的所有样式
getPropertyValue('font-size') - 获取字体大小的字符串值，例如：(16px)
match(/\d+/)[0]) - 仅获取数字部分，例如：(16) - 字符串
Number(...) - 将数字部分转换为数字，例如：(16) - 数字

- Aliaksandr Sushkevich

1

显然，这应该是被接受的答案（FF自2009-06-30以来就有getComputedStyle方法 - 甚至在kennebec的回答之前就已经存在了）。 - Alexander Mihailov

6

我认为 M 原则是一个神话。至少来自 http://www.w3.org/TR/CSS21/syndata.html 的以下文档证明基于 M 原则的计算过于复杂和不必要。

引用：

“em”单位等于其使用的元素的“font-size”属性的计算值。例外情况是当“em”出现在“font-size”属性本身的值中时，它指的是父元素的字体大小。它可以用于垂直或水平测量。（这个单位有时也被称为排版文本中的四分之一宽度。）

从这份文件中可以得出以下结论。

如果没有祖先元素的放大，1em恰好等于像素字体大小。
由于使用ems和百分比进行祖先元素的放大是以明确定义的方式进行的，因此一个简单的循环将计算精确的字体大小，假设：没有C.S.S;并且某些祖先元素已经设置了绝对单位的字体大小。
由于ems测量宽度，您可以通过创建一个长度为1000 ems的div并将其client-Width属性除以1000来始终计算出精确的像素字体大小。我似乎记得ems被截断到最接近的千分位，因此您需要1000 ems才能避免像素结果的错误截断。
您可能可以创建一个字体，其中M原则失败，因为em基于字体大小属性而不是实际字体。假设您有一种奇怪的字体，其中M的大小是其他字符的1/3，而您的字体大小为10像素。我有点认为字体大小是最大字符高度的保证，因此M将不是10像素，而所有其他字符都是30像素。

- Mark Willis

5

如果您使用rem作为单位，则默认的“font-size”应从<html>中获取，而不是从body或其他元素中获取。

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

- Dmitry Golikov

3

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

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

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

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

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

- Carlos

如所述：假设您想要特定元素的字体大小。不，不是的。我只想要当前环境的默认字体大小。 - Arthur Ronald

3

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

- Glenn

听起来是个好主意，但我认为还有另一个好的解决方案。 - Arthur Ronald

实际上，这就是现在的做法。 - Kenan Banks

1

这在火狐浏览器中有效。

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

- rahul

使用getComputedStyle()['font-size']而不是创建虚拟元素，可以使代码更加优雅。 - Dan Dascalescu

但是使用currentStyle是不好的，因为它是同样的getComputedStyle函数的专有变体，而你之前却赞扬了他。-1分。 - Armen Michaeli

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

*如果在代码的其他地方（例如某些CSS中）有不同的字体大小声明，则该函数将返回该值。例如：

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

以上代码将返回一个20像素的字体大小值。

已经进行了全面测试，并且在我的Chrome 22.0.1229.94 m和Firefox 13.01上运行正常。

- Xelus

1

元素的style对象属性仅包含那些在元素本身上设置的样式属性（例如font-size）。这意味着您可以将它们作为元素标记的一部分存在于style属性中，或者在之前像style.fontSize=...一样进行分配。如果您的元素从链接的样式表或文档中的<style>...</style>块获取其计算样式，则document.body.style不包含任何有用信息。你需要的是Window.getComputedStyle函数。它正好做你上面所需的事情。 - Armen Michaeli

1

虽然获取默认字体大小似乎是个好主意——如果它是为了设置页面布局等，那么让用户自己处理可能更安全。

如果他们的字体大小较大——那是因为他们视力不好，反之亦然。我建议您设置默认值并“推荐”分辨率/大小。除非您的应用程序依赖于此——否则让用户自己处理。

- MunkiPhD

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kennebec · Accepted Answer

有几种情况下这非常有用-

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