用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
值可能出现意外结果。

• MDN参考

数字和百分比或 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.

• MDN reference

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.

JSBin Demo.

这篇关于用rem-value中的字体计算行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！