用rem-value中的字体计算行高 [英] Calculate line-height with font in rem-value
问题描述
如何计算用rem设置font-size的最合适的行高?
例如:
html {
font-尺寸:62.5%;
}
p {
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
font-size:1.4rem;
line-height:1.3; / *我如何计算这个值? * /
}
我问这个问题的原因是,在字体大小之间的关系(为了容易rem计算),实际rem字体大小和非值在行高,据我在STATIC布局中理解的代表字体大小像:
font-size:20px;
和 line-height:2.0;
- 会将字体大小的高度增加为行高
在流体布局中 - 当在font-size中使用rem时,高度:2.0;使用rem中计算的字体的高度作为行高或仍然依赖于基于像素的值(在示例中是旧版浏览器的备用)?
我想我应该把这是我的原始问题 - 我现在要编辑
在我看来,所有这些(< number& ; |< length> em |< percentage>
)相对度量可能适用于 line-height
。
< number>
使用的值是此无单位< number>
乘以
元素的字体大小。计算的值与指定的
< number>
相同。在大多数情况下,这是设置行高度
的首选方式,在继承的情况下没有意外结果。
< length>
指定< length>
用于计算行框高度。 / p>
< percentage>
相对于元素的
字体大小本身。计算的值是这个百分比
乘以元素计算的字体大小。百分比和em
值可能出现意外结果。
数字
和百分比
或 em
:
根据 MDN doc ,此无单位的数字乘以元素自己的 font-size
(也适用于当前元素的每个子项)。
使用百分比
对于父元素,c $ c> em 会导致孩子从他们父计算的 line-height
中服从。
请检查 此演示 ,以查看
在这种情况下,所有这些值具有相同的效果:
/ p> p {
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
font-size:1.4rem;
line-height:1.3; / * = 1.3 * computed font-size * /
line-height:130%; / * = 1.3 * computed font-size * /
line-height:1.3em; / * = 1.3 * computed font-size * /
}
要计算 rem
单位中的行高值,可以使用以下命令:
html {font-size:62.5%; / *〜10px = 16px(default)* 0.625 * /} p {font-family:Arial,Helvetica,sans-serif; font-size:14px; font-size:1.4rem; line-height:1.3; / * as fallback * / / * value =(10px * 1.4 * 1.3)/ 10px = 1.82rem | | | < html> | | - >行高乘数(与< number>)相同font-size< - | in px - >当前元素的字体大小比* / line-height:1.82rem;} span {background-color:gold; } / * for demo * /
< p> ; span> Lorem ipsum dolor sit amet,consectetur adipisicing elit。 < / p> < / p>
>
FYI:默认值 font-size
< html>
在大多数网络浏览器中是 16px
,但它不会对我们的计算做任何更改。 / p>
JSBin演示 。
How can i calculate the most suitable line-height for font-size set with rem?
For example:
html {
font-size: 62.5%;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.3; /* how do i calculate this value? */
}
The reason i asked the question is that im a puzzled how to understand the relationship between font-size in body (for easy rem calculation), actual rem font-size and the "non-value" in line-height which as far as i understand in a STATIC layout represents font-size like:
font-size: 20px;
and line-height: 2.0;
- will add height of font-size as line-height
In a fluid layout - when using rem in font-size - will the "non-value" line-height: 2.0; use height of font calculated in rem as line-height or still rely on the pixel-based value (which in the example is fallback for older browsers)?
I think i should have put this is my original question - i'll edit now
Well, in my opinion, all these (<number> | <length> em | <percentage>
) relative measures might be appropriate for line-height
property.
<number>
The used value is this unitless<number>
multiplied by the element's font size. The computed value is the same as the specified<number>
. In most cases this is the preferred way to set line-height with no unexpected results in case of inheritance.
<length>
The specified<length>
is used in the calculation of the line box height.
<percentage>
Relative to the font size of the element itself. The computed value is this percentage multiplied by the element's computed font size. Percentage and em values may have unexpected results.
The difference between number
and percentage
or em
:
According to MDN doc, this unitless number multiplied by element's own font-size
(Also for each children of the current element).
While using percentage
or em
for a parent element, causes the children to obey from their parent's computed line-height
.
Check this demo to see the issue in action.
Putting all together
In this case, all these values have the same effect:
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.3; /* = 1.3 * computed font-size */
line-height: 130%; /* = 1.3 * computed font-size */
line-height: 1.3em; /* = 1.3 * computed font-size */
}
But to if you want to calculate the line-height value in rem
unit, you can use the following:
html {
font-size: 62.5%; /* ~10px = 16px(default) * 0.625 */
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.3; /* as fallback */
/* value = (10px * 1.4 * 1.3) / 10px = 1.82rem
| | |
<html> | | --> line-height multiplier (same as <number>)
font-size <-- |
in px --> Current element's font-size ratio
*/
line-height: 1.82rem;
}
span { background-color: gold; } /* for demo */
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consectetur quis omnis repellat voluptates necessitatibus repellendus
sapiente nesciunt vero dolorem voluptate mollitia ex a quo consequuntur
quia quasi aperiam quibusdam maiores.</span></p>
FYI: The default value of font-size
of <html>
is 16px
in most web browsers, however it doesn't make any changes into our calculations.
这篇关于用rem-value中的字体计算行高的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!