[英]How can i get default font size in pixels by using JavaScript or 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（））
我相信 M 原则是一个神话。 至少http://www.w3.org/TR/CSS21/syndata.html的以下文档证明基于 M 原理的计算过于复杂且不必要。
'em' 单位等于使用它的元素的 'font-size' 属性的计算值。 例外是当 'em' 出现在 'font-size' 属性本身的值中时，在这种情况下，它指的是父元素的字体大小。 它可用于垂直或水平测量。 （这个单位有时在印刷文本中也被称为四边形。）
从本文档中可以看出以下内容是正确的。
在没有祖先放大的情况下，1em 正好等于像素字体大小。
由于使用 em 和百分比的祖先放大以明确定义的方式工作，因此一个简单的循环将计算精确的字体大小，假设： 没有 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) - 获取 body 的所有样式getPropertyValue('font-size') - 获取字体大小的字符串值，例如： (16px)match(/\\d+/)[0]) - 仅获取数字部分，例如： (16) - 字符串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');
这会将值作为字符串返回，如下所示：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 + '"');
}
*如果正文在代码中的其他任何地方（可能在某些 css 中）具有不同的 fontSize 声明，则该函数将返回该值。 例如：
<style>body{font-size:20px;}</style>
<script>function getDefaultFontSize () {
defsize=(document.body.style.fontSize)
} </script>
以上将返回 20px 的 fontSize 值。
尽管获取默认字体大小似乎是一个好主意——如果要设置页面布局等，让用户处理它可能是一种更安全的做法。
如果他们的字体更大——那是因为他们是盲人，反之亦然。 我建议设置默认值并“推荐”分辨率/大小。 除非你的应用依赖它——让用户处理它。
这适用于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>
如果您使用rem作为单位，则默认的 'font-size' 需要取自<html> ，而不是来自 body 或其他。
alert(window.getComputedStyle(document.documentElement).getPropertyValue('font-size'))
如何使用JavaScript获取浏览器的宽度（以像素为单位）？
[英]How can I get the width of the browser in pixels using JavaScript?
如何编写脚本以使用Javascript重置默认字体大小？
[英]How do I script for resetting the default font size with Javascript?
我想在javascript中使用window.getComputedStyle（）来获取font-size，但它不能
[英]I want to get the font-size using window.getComputedStyle() in javascript but it can't
Tinymce：如何在初始化时显示默认字体系列或字体大小？
[英]Tinymce: How can I display the default font family or the font size on initialize?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.