[小筆記] 解決 font-weight 造成的寬度增加
我們在設計 hover 效果時可能會設定 font-weight 調整字體樣式
See the Pen 六角學員範例:font-weight hover 問題 by 蔡蔡 Mavis (@0430shinyu) on CodePen.
但是會發現這樣設定會造成寬度變大,以下有兩種方式可以解決:
1. 固定 a 標籤寬度
a{
width:5%;
}
2. 使用 Text Shadow
我們可以使用 Text Shadow 來模仿 font-weight 的效果
a {
transition: text-shadow .3s;
}
a:hover {
text-shadow: 0 0 .65px white, 0 0 .65px white;
}
參考資料來源:
Quick Tip: Fixing the font-weight Problem on Hover States