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

Question

正如标题所述，我尝试将文本元素修复到基线> on notally >更改其font-size >窗口大小。

我做了一个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技巧或解决方法？

它的角度运行，因此不允许使用花哨的jQuery;）

编辑：

大约从文本元素底部到窗口底部的距离。这需要恒定。

Answer 1

这里的问题是您使用的字体高点。当您注意到时，您将底部设置为0，但是如您所期望的那样，文本并未与窗口的底部对齐。

可以通过将线高设置为无单元的值来解决。这样，线高将相对于字体大小。人们会期望将线高设置为一个将解决此问题，但这取决于字体，以及它使用的高度。

如果您进行一些实验，则应该可以找到最佳位置。它不会100％准确，但是很近。我如下更新了您的小提琴，正如您在标尺的帮助下看到的那样，我补充说，它非常接近：

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

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