如何使用JavaScript或JQuery获得默认字体大小(以像素为单位)?

有几种情况下,这可能是有用的-

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原则是一个神话。至少以下文档来自 http://www.w3.org/TR/CSS21/syndata.html

的“字体大小”属性的值 在其上使用的元素。这个 “字体大小”属性的值 在这种情况下,它指的是 父元素的字体大小。信息技术 可用于垂直或水平方向 测量。(本单元也是 有时称为“四边形宽度” 印刷文本。)

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

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

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

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

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

可以使用以下代码行完成此操作:

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

1. window.getComputedStyle(document.body) -要获得身体的所有样式
2. getPropertyValue('font-size') (16像素)
3. match(/\d+/)[0]) (16) -串
4. Number(...) -要将数字部分转换为数字,例如: (16) -数量

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

使用jQuery(假设您需要特定元素的字体大小):

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

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

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

这将以字符串形式返回值,如so:16px。

尽管获得默认字体大小似乎是个好主意——如果是为了设置页面的布局之类的,那么让用户来处理可能是更安全的做法。

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

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

我想这就是你想要的:

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>

上面返回的fontSize值为20px。

如果你使用 rem 作为单位,默认的“字体大小”需要从 <html> ,而不是从身体或其他方面。

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