15

如您所知，em 是一种相对字体度量，其中一个 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;
}

警报（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')- 获取字体大小的字符串值，例如：(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 原理的计算过于复杂且不必要。

'em' 单位等于使用它的元素的 'font-size' 属性的计算值。例外情况是当 'em' 出现在 'font-size' 属性本身的值中时，在这种情况下它指的是父元素的字体大小。它可用于垂直或水平测量。（这个单位有时也被称为印刷文本中的四边形。）

从本文档来看，以下情况属实。

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

  2. 由于 ems 和 percent 的祖先放大以明确定义的方式工作，一个简单的循环将计算准确的字体大小，假设： 没有 CSS；并且某些祖先将其字体大小设置为绝对单位。

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

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

于 2010-12-25T13:02:36.953 回答
3

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

于 2009-09-18T04:34:11.060 回答
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。

于 2009-09-18T06:57:28.883 回答
1

尽管获取默认字体大小似乎是个好主意——如果要设置页面布局等，让用户处理可能是一种更安全的做法。

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

于 2009-09-18T04:16:54.673 回答
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 在代码中的其他任何地方（可能在某些 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）。

于 2012-10-19T20:54:15.933 回答
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

如果您使用rem作为单位，则默认的“字体大小”需要取自<html>，而不是取自正文或其他。

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

于 2020-12-23T14:12:10.987 回答