شرح صفوف ومحتوى الفقرة
إذا عرّفت ملف الخط العادي ذي الوزن 400 وحده تحت الاسم "BrandCairo"، ثم طلبت لعنوان h1 سماكة عريضة font-weight: 700;، فلن يجد المتصفح رسماً حقيقياً للحروف العريضة؛ فيلجأ إلى التسميك الصناعي (Faux Bold) عبر نفخ حدود الحرف آلياً. يؤدي هذا التسميك المصطنع في الحروف العربية المتصلة إلى طمس فتحات الحروف وتلاصق النقاط وتشوه جماليات الكلمة.
لمنع هذا التشوه، اربط كل ملف وزن حقيقي بكتلة @font-face مستقلة تحمل اسم font-family ذاته تماماً، مع تحديد الواصف font-weight: 400; للملف العادي و font-weight: 700; للملف العريض ليختار المتصفح الملف الأصيل تلقائياً:
CSS
@font-face {
font-family: "BrandCairo";
src: url("fonts/cairo-400.woff2")
format("woff2");
font-weight: 400;
}
@font-face {
font-family: "BrandCairo";
src: url("fonts/cairo-700.woff2")
format("woff2");
font-weight: 700;
}