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

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

但是如何使用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())

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

我相信M原则是一个神话。 至少来自http://www.w3.org/TR/CSS21/syndata.html的以下文档certificate,基于M原理的计算过于复杂且不必要。

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

从这个文档中可以得到以下信息。

  1. 没有祖先放大,1em与像素字体大小完全相同。

  2. 由于ems和百分比的祖先放大率以明确定义的方式工作,因此简单的循环将计算确切的字体大小,假设:没有CSS; 和一些祖先的字体大小设置为绝对单位。

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

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

使用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 () { // 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,则该函数将返回该值。 例如:

   

以上将返回fontSize值为20px。


经过全面测试并适合我(chrome 22.0.1229.94 m和firefox 13.01)。

虽然看起来像获取默认字体大小可能是一个好主意 – 如果要设置页面的布局等,那么让用户处理它可能是一种更安全的做法。

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

这适用于FF。

  
test

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

 const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0]) 
  1. window.getComputedStyle(document.body) – 获取body的所有样式
  2. getPropertyValue('font-size') – 获取字体大小的字符串值,例如: (16px)
  3. match(/\d+/)[0]) – 只获取一个数字部分,例如: (16) – 字符串
  4. Number(...) – 将数字部分转换为数字,例如: (16) – 数字