Question

我目前正致力于在SASS中使用自定义mixin。

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

我试过制定公式来看看这是怎么发生的，但我正在挣扎。

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

修改

是的，我完全彻底错了。〜我已经改变了细节。

添加图片以显示显示的高度。

＆＃13;

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

＆＃13;

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

＆＃13;

第一次将一大块代码放入其中，所以希望这是正确的。

Answer 1

你错了。

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

＆＃13;

var input =
@"W 1, 2, 3
    W 4, 5, 6
        W 7, 8, 9";

var output = string.Empty;
var inputLines = input.Split('\n');

foreach(var inputLine in inputLines) {
    // get leading whitespace for line... you can use Regex here to match
    // more WS characters if you'd like
    var leadingWsAmt = inputLine.Length - inputLine.TrimStart(' ').Length;
    var leadingWs = new string(' ', leadingWsAmt);

    // trim all strings separated by comma so whitespace is correct in final result
    var inputsOnLine = inputLine
        .Split(',')
        .Select(x => x.Trim());

    output += string.Join(",\n"+leadingWs+"\t", inputsOnLine);

    // don't put comma after last item
    output += "\n"+leadingWs+"\t";
}
output = output.Trim();

Console.WriteLine(output);
// W 1,
//     2,
//     3
//     W 4,
//         5,
//         6
//         W 7,
//             8,
//             9

＆＃13;

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

＆＃13;

Answer 2

实际上，当字体大小为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 个答案: