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

Question

我的问题是我在之前的问题中提到的问题的扩展，请参阅此处 Vertically align sans-serif font precisely using jquery/css .

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

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

A 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
}

脚本

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

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

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

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

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

3: 你设置了一个 margin-left在你的第一个 div 上也打破了你的布局。相反，将边距添加到 <a> div 内的标记:

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

这是一个更新的 fiddle ，包含所有更改(没有 js\o/):http://jsfiddle.net/ksuTQ/7/