مشكلة font-weight: bold عند التمرير (hover)

الخط بوزن 600 عريض أكثر من 400، أي أن الحروف نفسها تشغل مساحة أفقية أكبر، فيتمدد النص عند التمرير ويزيح ما حوله،  بدلاً من تغيير font-weight فعلياً، نقوم بمحاكاة السُمك باستخدام ظل نص خفيف جداً بنفس لون النص، لنحافظ على نفس أبعاد الخط دون أن يتحرك النص بكسل واحد:

.link {
  font-weight: 400;
  transition: text-shadow 0.2s ease;
}

.link:hover {
  text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
}

تغيير font-weight عند الـ hover يجعل الأحرف تأخذ مساحة أعرض (وأحياناً أعلى قليلاً بسبب اختلاف القياسات المرتبطة بالخط)، فيتحرك النص أو يرتفع لأن العنصر يعيد حساب أبعاده (reflow).

محاكاة الخط العريض بـ text-shadow بدلاً من font-weight بما أن text-shadow لا يغير أبعاد الصندوق إطلاقاً، هذا يمنع أي حركة

.link {
  font-weight: 400;
  text-shadow: none;
}

.link:hover {
  text-shadow: 0 0 0.3px currentColor, 0 0 0.3px currentColor;
}

يمكنك تكرار currentColor أكثر من مرة لزيادة سماكة الوهم البصري حسب الحاجة. أو حجز المساحة مسبقاً باستخدام

::after

مخفي بنفس النص العريض

تضع نسخة عريضة من النص مخفية (بـ visibility: hidden أو height: 0) لتحديد أقصى عرض ممكن، بحيث لا يتغير حجم العنصر الظاهر عند الـ hover 

<a class="link" data-text="النص هنا">النص هنا</a>

.link {
  position: relative;
  font-weight: 400;
  display: inline-block;
}

.link::before {
  content: attr(data-text);
  font-weight: 600;
  display: block;
  height: 0;
  visibility: hidden;
  overflow: hidden;
}

.link:hover {
  font-weight: 600;
}

هنا العنصر الوهمي (::before) يحجز أكبر عرض ممكن (النسخة العريضة) بشكل دائم، فلا يحدث أي قفز عند التبديل.