文章/答案/技术大牛

发布

社区首页 >问答首页 >使用rem-value中的字体计算行高

问使用rem-value中的字体计算行高
EN

Stack Overflow用户

提问于 2014-01-27 19:06:54

回答 3查看 20.6K关注 0票数 9

如何使用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? */
}

我问这个问题的原因是，我对如何理解body中的font-size (为了便于rem计算)、实际rem font-size和行高中的“非值”之间的关系感到困惑，据我所知，在静态布局中，它表示如下的font-size：

font-size: 20px;和line-height: 2.0; -将添加字号的高度作为行高

在流畅的布局中-当在font-size中使用rem时-“非值”行高度: 2.0；使用rem计算的字体高度作为行高，还是仍然依赖于基于像素的值(在本例中是旧浏览器的后备)？

我想我应该提出这是我最初的问题--我现在要修改

css

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-01-27 20:02:53

嗯，在我看来，所有这些(<number> | <length> em | <percentage>)相对措施可能都适合line-height属性。

<number>使用的值是这个无单位的<number>乘以元素的字体大小。计算值与指定的<number>相同。在大多数情况下，这是设置line-height的首选方法，在继承的情况下不会产生意外的结果。

<length>在计算行框高度时使用指定的<length>。

相对于元素本身的字体大小的<percentage>。计算值是这个百分比乘以元素的计算字体大小。百分比和em值可能会产生意外的结果。

MDN reference

number与percentage或em之间的区别

根据的说法，这个无单位数乘以元素自己的font-size (也适用于当前元素的每个子元素)。

当对父元素使用percentage或em时，会导致子元素服从其父元素的计算出的line-height。

查看以查看实际问题。

把所有的东西放在一起

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

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

仅供参考：在大多数web浏览器中，font-size of <html>的默认值是16px，但是它不会对我们的计算进行任何更改。

。

票数 15

Stack Overflow用户

发布于 2014-01-27 19:13:41

First，我不理解line-height在p元素中的概念，因为一个段落中两行之间的标准边距总是存在于浏览器的默认feature.The方式中，它只会继续在两行之间添加空格

给出一个解决方案，除非你选择media-query，否则没有标准的方法，因为line-height会处理字体的size，所以字体越大，行高就越大……理解这一点很重要，因为你已经设置了与视图端口尺寸=> font-size: 1.4rem;相关的font-size

点击此处了解line-height的工作原理：CSS - Line height property, how it works (simple)

编辑

在你评论之后编辑，看事情是这样的，如果你在你的p中给了line-height，它会继续添加到p...ifyou中的所有行，如果你不想去媒体查询和浏览器一致性是你主要关心的，那么你可以这样做：

p{
  line-height: 1.2;
  padding-top: 1% /*this will ensure that p has space from above */
}

票数 1

Stack Overflow用户

发布于 2014-01-27 19:13:25

请使用将行高乘以10，并使用px作为行高。

line-height: (1.3 * 10) + px;

同时，您只需使用line-height: 1.3rem;

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21379236

复制

相似问题

问使用rem-value中的字体计算行高
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用rem-value中的字体计算行高EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用rem-value中的字体计算行高
EN