根据字体大小和行高计算像素高度答案

【问题标题】：Working out pixel height from font size and line height根据字体大小和行高计算像素高度
【发布时间】：2016-04-23 22:08:16
【问题描述】：

我目前正在开发可在 SASS 中使用的自定义 mixin。

我想要实现的是从字体大小和行高中计算出像素高度。例如，我知道行高为 1 的 16px 字体大小出现在 22px 高。字体系列是 Open Sans。

我已经尝试制定公式来了解这是如何发生的，但我很挣扎。

有没有一种简单的方法可以从这两个输入中计算出字面像素高度？

编辑

是的，我完全错了。 ~ 我改变了细节。

添加图片以显示高度。

input {
  font-size: 16px;
  line-height: 1;
  font-family: "Open Sans",sans-serif;
      -webkit-appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid #7B7B7B;
    border-radius: 2px;
    width: 100%;
    background: #fff;
    font-family: "Open Sans",sans-serif;
    font-weight: 300;
    padding: 8px;
    margin: 0 0 12px;
    cursor: pointer;
    text-transform: none;
    font-size: 16px;
    font-size: 1em;
  }

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,900">


<input type="search" class="search_field" placeholder="Search..." id="search" name="s" title="Search for:" aria-required="true" aria-invalid="false" required="">

第一次把一大块代码放进去，希望这是正确的。

【问题讨论】：

将我的问题显示为重复的链接没有回答我的问题，我已经编辑了问题以希望更清楚。更改字体系列，字体大小为 16px，行高为 1，输出高度为 22px。
请发布可以重现您的问题的代码 sn-p。
@Sjrsmile 在我的回答中看到 cmets。并且不要附上屏幕截图，给我们一个工作示例。但是，您的屏幕截图已被剪切以获取更多 INRI！！！！
感谢您的光临，我第一次使用代码 sn-p 发布，显示 22px 高度。
见stackoverflow.com/questions/7229568/…

标签： html css font-size

【解决方案1】：

实际上，当字体大小为 16px，行高为 2 时，像素高度为 32px。公式很简单：font-size * line-height。

alert($("p").height());

p {
  font-size: 16px;
  line-height: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>test</p>

【讨论】：

感谢您的评论，但是我已经更新了我的问题，因为我在解释自己时犯了一个严重错误。

【解决方案2】：

你错了。

字体大小为 16 像素，行高为 2，行高为 32 像素。

span {
  display:inline-block;
  background:yellow;
  font-size: 16px;
  line-height: 2;
}

&lt;span&gt;Hello!&lt;/span&gt;

【讨论】：

感谢您的评论，但是我已经更新了我的问题，因为我在解释自己时犯了一个严重错误。
您正在显示带有input 标签的剪切屏幕截图，这不是问题所在。它改变了你的所有问题。
您需要在发布问题之前阅读一些内容。例如这个stackoverflow.com/help/how-to-ask 和非常重要的这个：stackoverflow.com/help/mcve。提供一个最小、完整和可验证的例子
感谢您的链接。