正如标题所说,我尝试将文本元素固定到基线,同时在调整窗口大小 时动态更改其字体大小。
我做了一个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;)
编辑:
它是关于文本元素底部到窗口底部的距离。这需要保持不变。
最佳答案
这里的问题是您的行高与您使用的字体相结合。正如您注意到的那样,您将 bottom 设置为 0,但文本并未如您预期的那样与窗口底部对齐。
这可以通过将行高设置为没有单位的值来解决。这样,行高将与字体大小相关。人们希望将行高设置为 1 可以解决这个问题,但这取决于字体,以及它使用了多少可用高度。
不过,如果您进行一些试验,您应该能够找到最佳点。它不会 100% 准确,但非常接近。我按如下方式更新了你的 fiddle ,正如你在我添加的标尺的帮助下看到的那样,它非常接近:
.foo {
position:fixed;
font-family: arial;
bottom: 10px;
line-height: .7; /* this will depend on the used font */
}
关于javascript - 动态更改字体大小时到基线的恒定距离 - html - 文本元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30334356/