【问题标题】:How to get font-size, written in CSS? [closed]如何获得字体大小,用 CSS 编写? [关闭]
【发布时间】:2013-08-16 15:09:34
【问题描述】:

如何获得用 CSS 编写的字体大小?它返回了错误的值。

jsFiddle example

HTML

<div id="test">TEXT</div>
<div id="test2">TEXT2</div>

CSS

#test{
    font-size: 38.5648887px;
}
#test2{
    font-size: 38.564px;
}

jQuery

var a = $("#test").css('font-size');
var b = $("#test2").css('font-size');
alert("test  = " + a + "\ntest2 = " + b); // test = 38.5667, test2 = 38.5667

【问题讨论】:

  • 你的意思是获取相同元素的字体大小吗?你有两次$("#test")。我想你可能也需要$("#test2")
  • 谢谢...我编辑了这个错误。但是输出还是一样的……我加了jsFiddle的例子。
  • 为什么需要返回这么精确的值?

标签: jquery css font-size


【解决方案1】:

你所拥有的应该可以工作,但是,你真的不需要任何 jquery。字体大小都可以使用纯 css 完成。

例如:

#test {
  font: 38px Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

#test2 {
  font: 24px Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-variant: small-caps;
}

HTML:

<div id="test">text</div>
<div id="test2">Text</div>

这能回答你的问题吗?

编辑: 看看这个小提琴:http://jsfiddle.net/e8WDk/2/

【讨论】:

  • 这是 jsFiddle 示例...试试看 - jsfiddle.net/ynternet/e8WDk
  • 将您的像素转换为“em”,这样就可以了!
  • 但是如何通过 jQuery 在 em 中获取字体大小?
  • 试试这个:jsfiddle.net/e8WDk/2 -- 你的 jquery 应该是正确的,这只是在你的 css 中应用正确的尺寸(将 px 转换为 em)
【解决方案2】:

如果我理解您的问题,这里的问题是字体大小定义值中的小数。 以下是正确的做法:

CSS

#test{
    font-size: 38px;
}
#test2{
    font-size: 38px;
}

如果您希望任何设备的行为更加动态,则必须使用“em”来定义值:

CSS

#test{
    font-size: 16em;
}
#test2{
    font-size: 15.5em;
}

这是响应式网页设计,如果您想进一步研究它。

问候,

【讨论】:

    【解决方案3】:

    在您的示例中,您使用了很多小数位。根据CSS spec,对小数位所需的精度没有要求。只是小数是可能的。

    话虽如此,我认为您可能遇到的小数点不准确是浏览器对它将存储的小数位数的限制。尤其是在像素方面,因为你真的不能显示半个像素。

    如果您正在寻找这种类型的精度,您最好使用em,它将缩放到当前继承的字体大小。

    【讨论】:

      【解决方案4】:

      根据我的经验,我看到大多数浏览器只能解析到小数点后千位,所以如果你的字体大小在这方面几乎相同,那么浏览器可能只是做了一些四舍五入来给你相同的值。

      不过我很好奇,为什么您需要两个几乎相同且相差小于 1 像素的字体大小声明?听起来您需要重新考虑解决问题的方法,而更好的方法可能会解决您正在研究的问题。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2010-09-15
        • 2013-07-06
        • 1970-01-01
        • 1970-01-01
        • 2013-04-23
        • 1970-01-01
        • 2017-07-29
        • 2013-06-29
        相关资源
        最近更新 更多