html - 汉堡图标 : buns+burger same size despite pixel alignment?

Question

问题:中间的条比其他条高一个像素。这不是，因为我弄错了 css，这是因为浏览器将矩形的边缘与像素网格对齐。

我尝试了几种制作汉堡包图标的不同方法:

1. 绝对定位一些带有背景色的 div。

2. 内联 svg 标签

3. svg 作为背景图片

4. 单个 div，带有顶部/底部边框和条形背景颜色，以及填充和 background-clip: content-box; 空间。

所有这些方法都有同样的问题:

在某些缩放级别/尺寸下，图标看起来很糟糕，因为三个矩形的尺寸并不完全相同。它们有时大小不同，因为浏览器喜欢将矩形的边缘与像素网格对齐。

我当然希望矩形之间的两个空间也具有相同的厚度。

我知道这是妥协的，即图标必须是 5 像素高的倍数。或者，如果您可以在交替断点处将空间扩展一个像素，而不是在扩展条形时，那么它可以有 2 倍或 3 倍的不同大小。

那么有什么诀窍呢？

webfont 能否使用提示来使所有三个矩形获得相同数量的粗细像素，而不管大小/分辨率/缩放？

我可以做一些 CSS 数学吗？

我真的希望我不必使用 JavaScript 来尝试检测缩放级别的变化。

编辑:现场演示

var hamburgerIconEl = document.getElementById('hamburgerIcon');
var fontSizeEl = document.getElementById('fontSize');
fontSizeEl.addEventListener('input', function (e) {
    hamburgerIconEl.style.fontSize = '' + (8 + parseFloat(fontSizeEl.value) / 100) + 'px';
});

    .body {
        background: white;
    }
    #hamburgerIcon {
        box-sizing: border-box;
        display: inline-block;
        height: 1.7ex;
        width: 2.04ex;
        border-width: .34ex 0;
        border-style: solid;
        border-color: black;
        background-clip: content-box;
        padding: .34ex 0;
        background-color: black;
    }

<p>Change the font size, watch the hamburger icon, see how there are a lot of sizes in which the bars don't all have the same thickness and/or spacing.</p>
<div>
  <input type="range" id="fontSize" min="0" max="1000" value="0">
  <label for="volume">Font Size</label>
</div>
<div>
    <div id="hamburgerIcon" style="font-size: 8px"></div> Menu
</div>

Answer 1

现在，我还没有看到您的内联 SVG，但问题可能是您将线条放置得太靠近 SVG 的边缘吗？如果是这样，部分顶线和底线会接缝更薄，因为它们很可爱。

var hamburgerIconEl = document.getElementById('hamburgerIcon');
var fontSizeEl = document.getElementById('fontSize');
fontSizeEl.addEventListener('input', function (e) {
  hamburgerIconEl.style.fontSize = '' + (8 + parseFloat(fontSizeEl.value) / 100) + 'px';
});

svg {
  height: 2em;
  width: 2em;
  font-size: 8px;
}

<div>
  <input type="range" id="fontSize" min="0" max="1000" value="0">
  <label for="volume">Font Size</label>
</div>
<div>
  <svg viewBox="0 0 10 10" id="hamburgerIcon">
    <path d="M 1 3 H 8 M 1 5 H 8 M 1 7 H 8" fill="none" stroke="black" stroke-width="1" />
  </svg>
</div>