问题:中间的条比其他条高一个像素。这不是因为CSS出了问题,而是因为浏览器将矩形的边缘对齐到像素网格。
我尝试了几种不同的方法来制作汉堡图标:
1. 绝对定位几个带有背景颜色的div。 2. 内联SVG标签 3. SVG作为背景图像 4. 单个div,上下边框和背景颜色用于条,填充和background-clip: content-box; 用于空格。
所有这些方法都有同样的问题:
在某些缩放级别/大小下,图标看起来很糟糕,因为三个矩形大小不一。它们有时会因为浏览器喜欢将矩形的边缘与像素网格对齐而变得不同大小。
当然,我也希望两个矩形之间的空格厚度相同。
我知道这需要妥协,即图标必须是5px的倍数高。或者,如果您可以在交替断点处扩展空间一个像素,那么当您扩展条时,它可以是2X或3X不同的大小。
我尝试了几种不同的方法来制作汉堡图标:
1. 绝对定位几个带有背景颜色的div。 2. 内联SVG标签 3. SVG作为背景图像 4. 单个div,上下边框和背景颜色用于条,填充和background-clip: content-box; 用于空格。
所有这些方法都有同样的问题:
在某些缩放级别/大小下,图标看起来很糟糕,因为三个矩形大小不一。它们有时会因为浏览器喜欢将矩形的边缘与像素网格对齐而变得不同大小。
当然,我也希望两个矩形之间的空格厚度相同。
我知道这需要妥协,即图标必须是5px的倍数高。或者,如果您可以在交替断点处扩展空间一个像素,那么当您扩展条时,它可以是2X或3X不同的大小。
那么诀窍是什么?
一个Web字体是否可以使用hinting,使得无论大小/分辨率/缩放,所有三个矩形都获得相同数量的像素厚度?
我可以做某种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>