我怎样才能通过使用JavaScript或JQuery的获取以像素为单位默认字体大小?(How can

2019-08-07 12:45发布

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

但是,如何才能通过我使用JavaScript或JQuery的得到当前环境(像素)的默认字体大小?

问候,

Answer 1:

有一对夫妇的情况下,这可能是useful-

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



Answer 2:

我相信M-原则是一个神话。 从最起码的下列文件http://www.w3.org/TR/CSS21/syndata.html证明,基于M-原理计算过于复杂和不必要的。

的“时间”单元是等于在其上所使用的元件的“字体尺寸”属性的计算值。 当“时间”中的“字体尺寸”属性本身,在这种情况下,它指的是父元素的字体大小的值发生异常是。 它可以用于垂直或水平的测量。 (此单元有时也被称为四叉宽度在印刷文本。)

从这个文件,以下是真实的。

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

  2. 由于与EMS和百分比祖先放大工作在良好定义的方式一个简单的循环会精确计算字体大小,假设:没有CSS; 和一些祖先有它的字体大小的绝对单位设置。

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

  4. 其中,M-原则失败,因为EM是基于字体大小或许您可以创建一个字体属性不实际的字体。 假设你有一个奇怪的字体,其中M为1/3的其他字符的大小,你有10个像素的字体大小。 我有种想字体大小是最大字符高度的保证,所以M将不会是10个像素和所有其它字符30个像素。



Answer 3:

一招我见过/在过去使用的是使一些文本(说50个任意字符或女士),然后测量呈现容器的大小和做数学题,找出单个字符的高度和宽度。 这是你要什么? 你可以做渲染的背景,这样用户就看不到它。



Answer 4:

使用jQuery(假设你想要一个特定元素的字体大小):

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

如果您使用的原型以及jQuery的,你需要使用jQuery的前缀,而不是美元符号:

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

这将返回值作为像这样的字符串:16px的。



Answer 5:

它可以使用此行代码来完成:

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


Answer 6:

虽然它似乎喜欢把自己的默认字体大小可能是一个好主意 - 如果它是设置你的页面的布局和这样的,它可能是一个比较安全的做法只是让用户处理这个问题。

如果他们有自己的字体大小 - 这是因为他们是盲目的,反之亦然。 我建议你设置默认值和“推荐”的分辨率/大小。 除非你的应用程序依赖于它 - 让用户处理。



Answer 7:

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


Answer 8:

我认为这是你在找什么:

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的decleration其他地方的函数将返回该值。 例如:

<style>body{font-size:20px;}</style>
<script>function getDefaultFontSize () {
defsize=(document.body.style.fontSize)
} </script>

上面的代码将返回20像素的fontSize的值。


全面的测试和对我的作品(铬22.0.1229.94 m和火狐13.01)。



文章来源: How can i get default font size in pixels by using JavaScript or JQuery?