粗体字体使宽度改变 [英] bold font makes width change

问题描述

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

I have a div with some text inside and a border.

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

当我将鼠标悬停在该div上时，

When I hover on that div, I want the font to be bold.

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

span{ 
    padding:20px;

}

div:hover{
    font-weight:bold;
}

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

This makes my div a bit wider - which causes an annoying flicker.

JSFiddle 示例

如何解决此问题？

编辑：

推荐答案

您的div是 inline-block 并没有显式的宽度，所以它收缩包装内容。该字体是一种比例字体，因此它变得更粗（并占据更多的水平空间）

Your div is inline-block and doesn't have an explicit width, so it shrink-wraps the content. The font is a proportional font, so it gets thicker (and takes up more horizontal space) when it is made bold.

将div设置为固定宽度，将其设置为 block 等宽字体。

Either give the div a fixed width, set it to block, or use a monospace font.

这篇关于粗体字体使宽度改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！