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

Question

我的问题是我在之前的问题中已经陈述的问题的扩展，请参阅此处Vertically align sans-serif font precisely using jquery/css。

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

顶部 div 的字体大小不同，我想根据字体对齐下部 div。原因是我根据窗口大小缩放我的字体大小。

demo on jfiddle 。

HTML

<div id="Hideheader" class="Header" style="position: absolute;font-size:40pt;padding:0px;visibility: hidden;width:auto;height:auto;">HEADER</div>
<div id="header" class="Header">HEADER</div>
<div id="menubar" class="menubar">
    <div class="menubutton_left"><a href="#" id="WorkButton">A</a>
    </div>
    <div class="menubutton_middle"><a href="#" id="AboutButton">B</a>
    </div>
    <div class="menubutton_right"><a href="#" id="ContactButton">C</a>
    </div>  <span class="stretch"></span>

</div>

CSS

div.Header {
    font-family:sans-serif;
    text-align:justify;
    white-space: nowrap;
}
div.menubar {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    margin-bottom: 0px;
    position: relative;
}
div.menubutton_left, div.menubutton_middle, div.menubutton_right {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    width:60px;
}
div.menubutton_left {
    margin-left:12px;
}
div.menubutton_middle {
    text-align: center;
}
div.menubutton_right {
    text-align: right;
}
.stretch {
    border: 2px dashed #444;
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

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

尝试调整浏览器窗口的大小。对于较小的字体大小，我变得特别明显

Answer 1

嗯，我以前用我自己的应用程序解决了这个问题，但方法很草率。您可能不想以这种方式做事，但无论如何我都会分享。我真的很喜欢@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 的字体！希望这会有所帮助！

Answer 2

我不知道我是否真的理解你的问题。但是，由于你的小提琴，我想我明白你想要什么。我会推荐：

1: 不要使用 JS 设置增大 font-size。您可以使用可变大小的单位，例如 vw、vh 或 vmin。他们根据父容器更改它的大小，例如：font-size: 20vw。

这比每次调整窗口大小时触发 javascript 都要轻很多。

2: 你已经为你的 div 设置了一个固定的宽度，所以只要它变得小于60px 你的布局就会中断。去掉它。您可以设置动态计算的宽度，例如：width: calc(100% / 3)，因此您的所有三个 div 都会相应地放置。

3：您在第一个 div 上设置了margin-left，这也破坏了您的布局。相反，将边距添加到 div 内的 <a> 标签：

div.menubutton_left a {
    margin-left:12px;
}

这是一个更新的小提琴，包含所有更改（没有 js \o/）：http://jsfiddle.net/ksuTQ/7/