javascript - 动态更改字体大小时到基线的恒定距离 - html - 文本元素

Question

正如标题所说，我尝试将文本元素固定到基线，同时在调整窗口大小 时动态更改其字体大小。

我做了一个jsfiddle为了显示。问题是，在调整窗口大小时，到窗口底部的距离不是恒定的。

<div class="foo">text</div>

<script>
  var onResizeFunction = function() {
    var newFontSize = Math.floor(0.2 * $(window).width());
    $(".foo").css("font-size", newFontSize);
  };

  onResizeFunction();

  $(window).resize(function() {
    onResizeFunction();
  });
</script>

我试过那样修复它。

.foo {
  position:fixed;
  bottom: 0;
}

显然问题出在文本元素的“hitbox” 上。不管怎样，也许有人知道一个不错的 CSS 技巧或解决方法？

它以 Angular 运行，所以不允许花哨的 jquery；)

编辑:

它是关于文本元素底部到窗口底部的距离。这需要保持不变。

Answer 1

这里的问题是您的行高与您使用的字体相结合。正如您注意到的那样，您将 bottom 设置为 0，但文本并未如您预期的那样与窗口底部对齐。

这可以通过将行高设置为没有单位的值来解决。这样，行高将与字体大小相关。人们希望将行高设置为 1 可以解决这个问题，但这取决于字体，以及它使用了多少可用高度。

不过，如果您进行一些试验，您应该能够找到最佳点。它不会 100% 准确，但非常接近。我按如下方式更新了你的 fiddle ，正如你在我添加的标尺的帮助下看到的那样，它非常接近:

.foo {
    position:fixed;
    font-family: arial;
    bottom: 10px;
    line-height: .7; /* this will depend on the used font */
}

https://jsfiddle.net/u6bd9qfp/2/