html – 使用rem-value中的字体计算行高

发布时间：2020-12-14 18:26:05 所属栏目：资源来源：网络整理

导读：如何计算最适合使用rem设置的字体大小的行高？例如： 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? */} 我问这个问题的原因是我很困

如何计算最适合使用rem设置的字体大小的行高？

例如：

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? */
}

我问这个问题的原因是我很困惑如何理解体内字体大小(为了便于计算),实际的rem字体大小和行高的“非值”之间的关系,就我而言在STATIC布局中理解表示如下字体大小：

font-size：20px;和行高：2.0; – 将font-size的高度添加为line-height

在流畅的布局中 – 当使用字体大小的rem时 – 将是“非值”行高：2.0;使用在rem中计算的字体高度作为行高还是仍然依赖于基于像素的值(在示例中是旧浏览器的后备)？
我想我应该说这是我原来的问题 – 我现在要编辑

解决方法

嗯,在我看来,所有这些(< number> |< length> em |< percentage>)相对度量可能适合 line-height属性.

<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.

07001

数字和百分比之间的差异：

根据MDN doc,这个无单位数乘以元素自己的font-size(也适用于当前元素的每个子元素).

使用百分比或em作为父元素时,会使子元素从父元素的计算行高中服从.

检查this demo以查看问题.

把所有人放在一起

在这种情况下,所有这些值都具有相同的效果：

p {
  font-family: Arial,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,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>

仅供参考：< html>的字体大小的默认值在大多数Web浏览器中是16px,但它不会对我们的计算进行任何更改.

JSBin Demo.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!