Javascript 在更改字体大小时垂直对齐无衬线字体

我的问题是我在前面的问题中所述问题的扩展，请参见此处

简而言之：我想用文本对齐两个div，一个在另一个之上，以便始终将a的开头（基本上是a的左下点）和H（H的左垂直线）对齐？关于我要实现的目标的想法：

上面的div有不同的字体大小，我想根据字体对齐下面的div。原因是我根据窗口大小调整字体大小

A

HTML

JSCRIPT

resizeHead("#Hideheader", "#header");

$(window).resize(function() {
  resizeHead("#Hideheader", "#header");
});

function resizeHead(p1, p2) {
    var fontsize = parseFloat($(p1).css("font-size"));
    var spacing = parseFloat($(p1).css("letter-spacing"));
    var initWidth = $(p1).width();
    initWidth = initWidth - spacing;
    var outWidth = $(p2).width();

    var s = outWidth / initWidth;
    s = fontsize * s;
    $(p2).css({
        "font-size": s
    });
}

---

尝试调整浏览器窗口的大小。对于较小的字体，我变得特别明显。我不知道我是否真的理解你的问题。。但是，由于你的小提琴，我想我知道你想要什么了。我建议：

1：不要使用JS设置增加字体大小。您可以使用可变大小的单位，如

vw

、

vh

或

vmin

。它们根据父容器更改其大小，如：

font-size:20vw

它比在每次调整窗口大小时触发javascript要轻得多

2：您已经为div设置了一个固定的宽度，因此每当它小于

60px

时，您的布局就会中断。移除它。您可以设置动态计算的宽度，例如：

width:calc（100%/3）

，这样所有三个div都将相应地放置

---

3：您在第一个div上设置了一个

左边距

，这也破坏了您的布局。相反，在

中添加边距好吧，我以前用自己的应用程序解决过这个问题，但方法很草率。你可能不想这样做，但我还是会分享的。我真的很喜欢@LcSalazar的帖子，但我发现在过去，一旦我添加了具有相对定位的元素，我有时会在配置页面的其余部分时遇到问题，但看起来你还是这样做了。首先尝试@LcSalazar的答案，然后如果你真的想，试试这个。我还建议尝试使用span等元素而不是div，但这可能会改变整个项目

最大的问题是，在HTML中，确实没有收集TextMetrics的好方法，因为这正是您所要求的。画布元素有TextMetrics，但它们只提供宽度

var myCanvas = document.createElement('canvas');
var myContext = myCanvas.getContext('2d');

var myText = "I'm getting measured by canvas calls!";

var textMetrics = myContext.measureText(myText);

var textWidth = textMetrics.width;

不幸的是，你想要的是身高。
这就是我过去所做的

var hiddenDiv =  document.createElement('div');
hiddenDiv.style.visibility = 'hidden';
hiddenDiv.style.position = 'absolute';
hiddenDiv.style.top = '0px';
hiddenDiv.style.left = '0px';
document.body.appendChild(hiddenDiv);

var myText = "I'm getting measured by a sloppy div";

function getTextHeight(text, font)
{
   hiddenDiv.style.font = font;
   hiddenDiv.innerHTML = text;

   return hiddenDiv.clientHeight;
}

var myFont = 'normal 13px Verdana';

var textHeight = getTextHeight(myText, myFont);

然后，您可以使用文本高度来执行您想要执行的任何类型的大小调整或相对定位。很抱歉，我自己没有尝试将它合并到您的项目中，我只是想向您展示一种收集文本高度的方法，而无需编写大量代码块。在测量div之前，请确保设置了div的字体！希望这有帮助
 哇，这是一些很好的建议，谢谢！你们是否也知道一个解决方案，以便始终将a的起点（基本上是a的左下点）和H（H的左垂直线）对齐？我希望我的问题不会太让人困惑。而且我没有足够的声誉来支持你的回答：|没问题。。。首先，我已将标题设置为
text align:center
，因此将其更改回
text align:left
。现在，为了按照你想要的方式排列，也许你可以设置你的，实际上，我不是在寻找高度，而是在寻找到划分开始的偏移量，一个我想要实现的想法：哦，现在我明白你的意思了。听起来有点棘手，但我认为这可以通过使用CSS来实现。尝试将边距和填充设置为0。我不确定这是否也能满足你的要求，我以前从未尝试过。
div.menubutton_left a {
    margin-left:12px;
}

var myCanvas = document.createElement('canvas');
var myContext = myCanvas.getContext('2d');

var myText = "I'm getting measured by canvas calls!";

var textMetrics = myContext.measureText(myText);

var textWidth = textMetrics.width;

var hiddenDiv =  document.createElement('div');
hiddenDiv.style.visibility = 'hidden';
hiddenDiv.style.position = 'absolute';
hiddenDiv.style.top = '0px';
hiddenDiv.style.left = '0px';
document.body.appendChild(hiddenDiv);

var myText = "I'm getting measured by a sloppy div";

function getTextHeight(text, font)
{
   hiddenDiv.style.font = font;
   hiddenDiv.innerHTML = text;

   return hiddenDiv.clientHeight;
}

var myFont = 'normal 13px Verdana';

var textHeight = getTextHeight(myText, myFont);