[小筆記] 解決 font-weight 造成的寬度增加

Jun 26, 2021

我們在設計 hover 效果時可能會設定 font-weight 調整字體樣式

但是會發現這樣設定會造成寬度變大，以下有兩種方式可以解決：

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