粗体字使宽度改变答案

【问题标题】：bold font makes width change粗体字使宽度改变
【发布时间】：2012-10-13 15:02:52
【问题描述】：

我有一个 div，里面有一些文本和一个边框。

<div><span>This is my div</span></div>

当我将鼠标悬停在该 div 上时，我希望字体为粗体。

div{
    border: 1px solid black;
    display:inline-block;
    padding:20px;
}

span{ 
    padding:20px;

}

div:hover{
    font-weight:bold;
}

这使我的 div 有点宽 - 这会导致烦人的闪烁。

JSFiddle 上的示例

我该如何解决这个问题？

编辑：

div 的宽度必须随内容增长，而不是随重量增长。

【问题讨论】：

标签： html css

【解决方案1】：

您的 div 是 inline-block 并且没有明确的宽度，因此它会收缩包装内容。字体是proportional font，所以加粗后会变粗（并占用更多水平空间）。

给 div 一个固定的宽度，将其设置为 block，或者使用等宽字体。

【讨论】：

粗体字形是否比普通字形宽取决于字体，因此使用等宽字体不一定有帮助。等宽意味着字形在字体内具有相同的宽度，不一定跨字体的字体。此外，某些等宽字体（例如 Lucida Console）只有一种字体，因此将它们加粗要么失败，要么（通常在 Web 浏览器中）导致算法加粗，因此要使用更宽的字形。

【解决方案2】：

您可以使用文本阴影模拟粗体效果。所以你会有

div:hover { 
text-shadow: 0 0 1px black, 0 0 1px black;
}

您可以通过将 1px 更改为更高或更低的数字来控制效果。您还需要根据文本颜色更改阴影的颜色。在此处查看有关此解决方案的整篇文章： https://www.sitepoint.com/quick-tip-fixing-font-weight-problem-hover-states/

【讨论】：

【解决方案3】：

我通过玩字母间距非常接近：

http://jsfiddle.net/thezver/U56R6/1/

<div>Asdf</div>
<div>ab acRsery</div>
<div>abc f</div>
<div>aMdNhjkl</div>
<div>1</div>

css:

div{
    display:inline-block;
    font-family:'Open Sans';
    font-size: 16px;
    padding:5px 10px;
    border:1px solid gray;
    letter-spacing: 0.5px;
}

div:hover{
    font-weight:bold;
    letter-spacing:-0.1px;
}

【讨论】：

【解决方案4】：

您可以将 div 设置为固定宽度并居中对齐文本以保持整洁

div{
    border: 1px solid black;
    display:inline-block;
    padding:20px;
    width: 150px;
    text-align: center;
}

span{
    padding:20px;
}

div:hover{ 
    font-weight:bold; 
}

Working Example From jsFiddle

希望对你有帮助

【讨论】：