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

前端之家收集整理的这篇文章主要介绍了html – 使用rem-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.

原文链接:https://www.f2er.com/html/226383.html

猜你在找的HTML相关文章