我调用$("#foobar").css("line-height"),得到的结果是“normal”。我如何将其转换为像素数量?“normal”是在CSS规范中定义的,还是特定于浏览器?
$("#foobar").css("line-height")
kgqe7b3p1#
根据this page,似乎大多数最近的浏览器使用相同的值为line-height: normal:1.14,id est的font-size属性与1.14系数。尝试了几种浏览器(在Windows XP上):
line-height: normal
font-size
我错了,line-height取决于font-family,font-size,你的浏览器,也许你的操作系统。更多关于Eric Meyers' website的阅读。
line-height
font-family
f5emj3cl2#
正常实际上是指abnormal对several instances,因为有相当浏览器不一致。声明line-height:normal不仅在不同浏览器之间有所不同,这是我所期望的--事实上,量化这些差异是关键--而且它们在不同的字体之间也有所不同,在给定的字体内部也会有所不同。
abnormal
irtuqstp3#
normal是line-height的一个有效设置,所以对于返回这个设置的浏览器来说,没有什么办法。或者,你可以使用.css('height'),因为它只计算元素的内部部分,而不计算padding/border/margin。如果你有一个多行元素,或者一个不仅仅包含文本的元素,这将需要一点创造力。http://jsfiddle.net/xVBfb/
normal
.css('height')
**编辑:**一个变通办法的例子是
<span id='def' style='line-height:inherit;display:none;'> </span>个在元素中,然后要找到行高,你可以使用#def的.height(),因为它总是只有一行,因此,父元素的行高。Windows XP中的Chrome是一个在jsfiddle中返回normal的浏览器示例,除非另有明确指定。Firefox返回像素计数。normal是根据w3规范的初始值。http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
<span id='def' style='line-height:inherit;display:none;'> </span>
.height()
cnjp1d6j4#
精确计算像素中的正常行高是很困难的。虽然,根据MDN,它大约是1.2em。如果您已经:
body{ font-size: 16px; }
字符串所以,你的网站有正常的字体大小为16px,那么正常的行高大约是24px。这意味着你可以计算正常的字体大小像素值乘以1.5,即16px * 1.5 == 24px注意:我没有乘以1.2,因为px值和em值之间存在差异。
24px
1.5
16px * 1.5 == 24px
avkwfej45#
然而,这是写了很久以前,但帮助我写在我的任务临时解决方案。我复制这个代码比也许其他人可以使用它。
$('#lineHeightInc') .click(function() { var box = GetSelectedBox(); var ct = box.data('LineHeight'); if (isNaN(ct)) ct = 0; ct++; box.css('line-height', (parseFloat(box.css('font-size')) * 1.61 + ct) + 'px'); box.data('LineHeight', ct); }); $('#lineHeightDic') .click(function () { var box = GetSelectedBox(); var ct = box.data('LineHeight'); if (isNaN(ct)) ct = 0; ct--; box.css('line-height', (parseFloat(box.css('font-size')) * 1.61 + ct) + 'px'); box.data('LineHeight', ct); });
字符串
mnemlml86#
以下是如何理解和使用CSS line-height属性:CSS Line-Height:
line-height:正常|number|长度|初始|继承;
当你深入研究使用CSS行高值时,请密切关注本指南:
正常:这是标准行高,在大多数桌面浏览器上通常约为1.2,但它可能会因使用的字体系列而异。长度:使用cm、pt或px等单位指定精确的行高。此度量将定义行框的高度。百分比:设置元素相对于字体大小的行高。这允许可伸缩和响应式设计。编号:输入一个数字将与当前字体大小相乘以获得行高。这种方法通常因其一致性和可预测的结果而受到青睐。Initial:将属性重置为CSS规范中定义的默认值。Inherit:行高取自父元素,保证继承样式一致。
在使用line-height属性时请参考这些定义,以增强文本元素的可读性和设计。
6条答案
按热度按时间kgqe7b3p1#
根据this page,似乎大多数最近的浏览器使用相同的值为
line-height: normal
:1.14,id est的font-size
属性与1.14系数。尝试了几种浏览器(在Windows XP上):
已编辑
我错了,
line-height
取决于font-family
,font-size
,你的浏览器,也许你的操作系统。更多关于Eric Meyers' website的阅读。
f5emj3cl2#
正常实际上是指
abnormal
对several instances,因为有相当浏览器不一致。声明line-height:normal不仅在不同浏览器之间有所不同,这是我所期望的--事实上,量化这些差异是关键--而且它们在不同的字体之间也有所不同,在给定的字体内部也会有所不同。
irtuqstp3#
normal
是line-height
的一个有效设置,所以对于返回这个设置的浏览器来说,没有什么办法。或者,你可以使用
.css('height')
,因为它只计算元素的内部部分,而不计算padding/border/margin。如果你有一个多行元素,或者一个不仅仅包含文本的元素,这将需要一点创造力。http://jsfiddle.net/xVBfb/
**编辑:**一个变通办法的例子是
<span id='def' style='line-height:inherit;display:none;'> </span>
个在元素中,然后要找到行高,你可以使用#def的
.height()
,因为它总是只有一行,因此,父元素的行高。Windows XP中的Chrome是一个在jsfiddle中返回
normal
的浏览器示例,除非另有明确指定。Firefox返回像素计数。normal
是根据w3规范的初始值。http://www.w3.org/TR/CSS2/visudet.html#propdef-line-heightcnjp1d6j4#
精确计算像素中的正常行高是很困难的。虽然,根据MDN,它大约是1.2em。
如果您已经:
字符串
所以,你的网站有正常的字体大小为16px,那么正常的行高大约是
24px
。这意味着你可以计算正常的字体大小像素值乘以1.5
,即16px * 1.5 == 24px
注意:我没有乘以1.2,因为px值和em值之间存在差异。
avkwfej45#
然而,这是写了很久以前,但帮助我写在我的任务临时解决方案。我复制这个代码比也许其他人可以使用它。
字符串
mnemlml86#
以下是如何理解和使用CSS line-height属性:
CSS Line-Height:
line-height:正常|number|长度|初始|继承;
当你深入研究使用CSS行高值时,请密切关注本指南:
正常:这是标准行高,在大多数桌面浏览器上通常约为1.2,但它可能会因使用的字体系列而异。
长度:使用cm、pt或px等单位指定精确的行高。此度量将定义行框的高度。
百分比:设置元素相对于字体大小的行高。这允许可伸缩和响应式设计。
编号:输入一个数字将与当前字体大小相乘以获得行高。这种方法通常因其一致性和可预测的结果而受到青睐。
Initial:将属性重置为CSS规范中定义的默认值。
Inherit:行高取自父元素,保证继承样式一致。
在使用line-height属性时请参考这些定义,以增强文本元素的可读性和设计。