في هذا الدرس 5تصفّح المواضيع
بعد اختيار عائلة الخط وحجمه، تتكامل ثلاث خصائص محورية لضبط تعبيرات الحروف وإبراز المعاني وهي font-style و font-weight و font-variant. ونبدأ بخاصية font-style التي توفر ثلاث قيم للتحكم في استقامة الحرف أو ميلانه:
- القيمة
normal: تعرض الحروف قائمة معتدلة، وتُستخدم كثيراً لإلغاء الإمالة الافتراضية عن عناصر مثل<address>و<cite>. - القيمة
italic: تستدعي النسخة المائلة الأصلية التي رسمها مصمم الخط يدوياً بانسيابية خاصة للأحرف اللاتينية. - القيمة
oblique: تُمِيل الحروف القائمة نفسها هندسياً بزاوية مائلة (مثلoblique 12deg) دون تغيير شكل رسم الحرف.
في التصميم العربي الرصين، تجنب إمالة الجمل العربية بقيمتي italic أو oblique؛ لأن الخط العربي متصل بطبيعته على السطر، والإمالة الميكانيكية تكسر انسيابية الوصلات وتشوه مواضع النقاط.
.book-ref {
font-style: italic;
}
.slanted-note {
font-style: oblique;
}
address {
font-style: normal;
}تتحكم خاصية font-weight في درجة ثقل الحروف وسماكة خطوطها. ويمكنك كتابتها بالكلمات الدلالية normal و bold والكلمتين النسبيتين للأب bolder و lighter، أو عبر المقياس الرقمي القياسي المجرد من الوحدات من 100 حتى 900:
| القيمة الرقمية | التسمية المطبعية القياسية | المكافئ الكلمي في CSS |
|---|---|---|
100 / 200 | رفيع جداً (Thin / Extra-Light) | — |
300 | خفيف (Light) | — |
400 | عادي (Regular) | normal (الوزن الافتراضي للمتن) |
500 / 600 | متوسط / شبه عريض (Medium / Semi-Bold) | — (مثالي للأزرار والعناوين الفرعية) |
700 | عريض (Bold) | bold (الافتراضي للعناوين و <strong>) |
800 / 900 | عريض جداً / داكن (Extra-Bold / Black) | — |
.light-sub {
font-weight: 400;
}
.semi-label {
font-weight: 600;
}
.heavy-title {
font-weight: 700;
}حين يمتلك الخط أوزاناً حقيقية مرسومة بعناية، تزداد سماكة الحرف بتوازن يحافظ على نقاء الفراغات الداخلية الدقيقة داخل الحروف. أما إذا فُرض الوزن العريض bold على خط لا يملك سوى وزن واحد عادي، فيلجأ المتصفح إلى التسميك الصناعي (Faux Bold) عبر مضاعفة حدود الحرف آلياً بشكل ضبابي سميك.
يتضرر الخط العربي بشدة من التسميك الصناعي؛ إذ تنطمس الحلقات المفرغة داخل حروف مثل الميم والهاء والصاد والعين وتلتصق النقاط المتجاورة ببعضها. جرّب التبديل بين النماذج النظيفة في المختبر التفاعلي التالي:
توفر خاصية font-variant لمسة طباعية كلاسيكية راقية للنصوص اللاتينية عبر القيمة small-caps (مقابل الوضع العادي normal). فعند تفعيل small-caps تحتفظ الأحرف الإنجليزية الكبيرة بارتفاعها الأصلي الكامل، بينما تتحول الأحرف الصغيرة إلى أحرف كبيرة مصغرة الارتفاع تنسجم بهدوء مع إيقاع السطر في مقدمات الفصول وأسماء الباحثين والمختصرات.
وبما أن الأبجدية العربية أحادية الحالة ولا تعرف انقسام الحروف إلى كبيرة وصغيرة، فإن تطبيق font-variant: small-caps; يترك الكلمات العربية سليمة كما هي تماماً ويؤثر فقط في المفردات اللاتينية المجاورة.
يمنحك الجمع المتزن بين الخصائص الثلاث تحكماً كاملاً في نبرة النص دون إثقال وسوم HTML؛ فاستخدم font-variant: small-caps; للشارات الإنجليزية العلوية، وخصّص font-style: italic; للمراجع اللاتينية، واعتمد في النصوص العربية على تباين السماكة الحقيقية 600 أو 700 مع تباين لوني هادئ لإبراز المفاهيم المحورية بأعلى درجات النقاء.
.kicker {
font-variant: small-caps;
font-weight: 700;
}
.key-term {
font-weight: 700;
font-style: normal;
color: #5b3894;
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس ضبط استقامة وإمالة الحروف بخاصية font-style، وتدرج السماكة القياسي من 100 إلى 900 بخاصية font-weight، وتفعيل الأحرف اللاتينية المصغرة عبر font-variant: small-caps;، مع وقاية النصوص العربية من التسميك الصناعي والإمالة القسرية. الخطوة التالية: انتقل الآن إلى درس «اختصار خصائص font في لغة CSS» لدمج خصائص الخط كاملةً في تصريح واحد مختصر ودقيق.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Italic vs. Oblique الفرق بين italic و oblique
- تستدعي القيمة italic رسماً مائلاً أصيلاً صممه الخطاط، بينما تُمِيل القيمة oblique الحروف العادية هندسياً بزاوية مائلة.
- للمراجعة
- 02 Synthetic Bold (Faux Bold) التسميك الصناعي
- تضخيم آلي مشوه يصنعه المتصفح لحواف الحروف عند طلب وزن عريض غير متوفر فعلياً داخل ملف الخط مما يطمس فراغات الحروف العربية.
- للمراجعة
- 03 Numeric Font Weight Scale مقياس السماكة الرقمي
- التدرج الرقمي القياسي المجرد من الوحدات من 100 للأشد نحافة إلى 900 للأشد سماكة، حيث تعادل 400 العادي و 700 العريض.
- للمراجعة
- 04 Small Capitals (small-caps) الأحرف الكبيرة المصغرة
- قيمة في خاصية font-variant تحول الأحرف الإنجليزية الصغيرة إلى رسم أحرف كبيرة بارتفاع مصغر متناسق مع السطر.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- لغة الأنماط المتتالية المنظمة لقواعد إمالة الحروف وأوزان سماكتها وأشكالها الطباعية.
- للمراجعة
- 02 W3C W3C
- World Wide Web Consortium
- رابطة الويب العالمية التي تحدد خوارزمية مطابقة أوزان الخطوط الرقمية من 100 إلى 900.
- للمراجعة
- 03 UI UI
- User Interface
- واجهات المستخدم الرقمية التي توظف تباين الأوزان 600 و 700 لإبراز الأزرار والعناوين بوضوح.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
في محرر التجريب، ألغِ الإمالة الافتراضية لعنصر address عبر font-style: normal، وميّز شارة نصية بالوزن الرقمي 600.
-
طبّق القيمة font-variant: small-caps مع الوزن 700 على عنوان فرعي إنجليزي وتأكد من مظهر الأحرف المصغرة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.