粗體字體會使寬度發生變化

我有一個帶有一些文字和邊框的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的寬度與內容增長，但與重量。

來源

2012-10-23 guy mograbi

你的div是inline-block，沒有明確的寬度，所以它收縮包裝內容。字體是proportional font，所以當它變成粗體時它變得更厚（並且佔據更多的水平空間）。

要麼給div一個固定的寬度，將其設置爲block，要麼使用等寬字體。

來源

2012-10-23 15:57:12 Quentin

http://jsfiddle.net/8hWzp/說明 –

這取決於字體加粗字體字形是否比正常字體字形更寬，因此使用等寬字體並不一定幫助。等寬字體意味着字形在字體中具有相同的寬度，而不一定是字體的字體。此外，一些等寬字體（例如Lucida控制檯）只有一種字體，因此加粗它們或者失敗或（通常在Web瀏覽器中）導致算法粗體，因此會使用更寬的字形。 –

你可以設置你的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

希望這有助於

來源

2012-10-23 16:02:50 Phil

我用字母間距打了八九不離十：

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

來源

2014-04-08 15:47:12 TheZver

粗體字體會使寬度發生變化

回答

相關問題