Art*_*ald 11 javascript css jquery fonts font-size
如您所知,em是一种相对字体测量,其中一个em等于默认字体大小中字母"M"的高度.使用它的一个优点是因为您可以调整文本大小.
但是如何使用JavaScript或JQuery获取当前环境的默认字体大小(以像素为单位)？
问候,
ken*_*bec 19
有几种情况可以使用 -
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的以下文档证明，基于M原理的计算过于复杂和不必要。
'em'单位等于使用它的元素的'font-size'属性的计算值。例外是'em'出现在'font-size'属性本身的值中，在这种情况下，它是指父元素的字体大小。它可以用于垂直或水平测量。（此单位有时在印刷文本中也称为四角宽度。）
根据本文档，以下内容是正确的。
没有祖先放大，1em等于像素字体大小。
由于祖先用ems和percent进行的放大以明确定义的方式工作，因此，一个简单的循环将计算确切的字体大小，假定：没有CSS；没有CSS。某些祖先以绝对单位设置了字体大小。
由于ems可以测量宽度，因此您始终可以通过创建一个长度为1000 ems的div并将其client-Width属性除以1000来计算确切的像素字体大小。我似乎记得ems被截断为最接近的千分之一，因此您需要1000 ems避免错误截断像素结果。
您可能会在M原理失败的地方创建字体，因为em是基于font-size属性而不是实际字体。假设您有一个怪异的字体，其中M是其他字符的1/3，并且字体大小为10像素。我认为字体大小是最大字符高度的保证，因此M不会是10像素，而所有其他字符都是30像素。
可以使用这行代码来完成：
const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])
window.getComputedStyle(document.body) - 获取身体的所有样式getPropertyValue('font-size')- 获取字体大小的字符串值，例如：(16px)match(/\d+/)[0])- 仅获取数字部分，例如：(16) - 字符串Number(...)- 将数字部分转换为数字，例如：(16) - 数字小智 5
如果您使用rem默认的“font-size”作为单位，则需要从<html>，而不是从 body 或其他中获取。
alert(window.getComputedStyle(document.documentElement).getPropertyValue('font-size'))