تنسيق الخط مع Font Properties في CSS
كيف يتم ضبط خط النص من خلال تعليمات الـ CSS…؟؟!! وما هي الخصائص التي توفرها CSS لتنسيق الخط في CSS..؟؟! كيف نتحكم في نوع الخط وحجمه وغيرها من خلال تعليمات CSS..؟!
استكمالاً لمقالات CSS سنتطرق في هذا المقال طريقة التعامل مع الخطوط fonts في CSS سنتعرف في هذا المقال على الخصائص التي توفرها الـ CSS لتنسيق الخط سواء من ناحية الشكل style , السُمك weight والحجم size وطريقة تحديد نوع الخط لنبدأ....
سنتعرف في هذا المقال على :
- font-family نوع الخط.
- font-size حجم الخط
- font-style شكل الخط.
- font-weight سُمك الخط.
- أفضل الممارسات التي يفضل اتباعها عند تنسيق الخطوط في CSS.
font-family نوع الخط
لتنسيق الخطوط توفر CSS الخاصية font-family لتحدد نوع الخط font-family المراد تعيينه والخطوط البديلة له في حال عدم توفره، أي يتم تعيين عائلة الخط - عائلة الخط هي مجموعة من أنوع الخط المتجانسة - كا قيم لخاصية font-family. هذا يعني أن خاصية font-family تحتفظ بالعديد من أسماء الخطوط كنظام "احتياطي".
ان تعدد قيم نوع الخط المسندة للخاصية font-family تتيح للمتصفح الويب الذي لا يدعم الخط الأول ، يحاول الخط التالي فالتالي وهكذا.والأفضل أن نبدأ بالخط الذي نريد ، وننتهي بالعائلة العامة ، للسماح للمتصفح باختيار خط مشابه في المجموعة العامة إذا لم تكن هناك خطوط أخرى متوفرة ، وفي CSS ، هناك نوعان من أسماء عائلة الخطوط:
- عائلة عامة generic family مجموعة من مجموعات الخطوط بمظهر مشابه (مثل "Serif" أو "Monospace").
- عائلة خطوط معينة specific font family (مثل "Times New Roman" أو "Arial").
وهنا مثال على طريقة ضبط نوع الخط في CSS مع الخاصية font-family :
<!DOCTYPE html>
<html>
<head>
<style>
p.a { font-family:'Georgia', 'Times New Roman', 'Times', 'serif';}
p.b { font-family:'Verdana', 'Geneva', 'Tahoma', 'sans-serif';}
</style>
</head>
<body>
<h1>Font-family </h1>
<p class="a">This is an example of the Font-family property.</p>
<p class="b">This is an example of the Font-family property.</p>
</body>
</html>
لتكن النتيجة
font-size حجم الخط
تعد القدرة على إدارة حجم النص أمرًا مهمًا في تصميم الويب. ومع ذلك ، لا يجب استخدام تعديلات حجم الخط لجعل الفقرات تبدو كعناوين. لتنسيق حجم الخط توفر CSS حدد خاصية حجم الخط font-size.يمكن أن تكون قيمة خاصية حجم الخط font-family مطلقة أو نسبية.
الحجم المطلق Absolute size :
مع الحجم المطلق للخط لا يسمح التنسيق الخط بتغيير حجم النص في جميع المتصفحات (سيئة لأسباب الوصول) ويفيد الحجم المطلق عندما يكون الحجم للمخرجات محدد ومعروف.ويمثل بقيمة أو مقياس ثابت.
الحجم النسبي Relative size:
مع الحجم النسبي للخط يعين الحجم بالنسبة للعناصر المحيطة ويسمح هذا التنسيق بتغيير حجم النص في المتصفحات.ويمثل قيمة الحجم قيمة نسبية.
لضبط حجم الخط مع CSS مع font-size يمكن استخدام عدة انواع من القيم وهي:
- استخدام البكسل (px): يمكنك تحديد حجم الخط بالبكسل. عندما نحدد حجم الخط بالبكسل ، فإننا تخبر المتصفح عن عدد وحدات البكسل التي يجب أن يكون طول الحرف فيها.
- استخدام النسبة المئوية (%): يؤدي استخدام النسبة المئوية إلى إخبار المتصفح بحجم الخط لهذا العنصر بالنسبة إلى حجم خط عنصر آخر "العنصر الرئيسي".
- باستخدام em: مثل النسبة المئوية ، فهي وحدة قياس نسبية أخرى. مع em لا تحدد النسبة المئوية ؛ بدلاً من ذلك ، تحدد عامل تحجيم.
- استخدام الكلمات الأساسية: يمكنك تحديد حجم الخط على أنه x-small ، small, ... إلخ ، وسيقوم المتصفح بترجمة هذه الكلمات الأساسية إلى قيم بكسل باستخدام الإعدادات الافتراضية المحددة في المتصفح.
المثال التالي يشرح طريقة استخدام خاصية font-size لضبط حجم الخط:
<!DOCTYPE html>
<html>
<head>
<style>
p.a { font-size: 30px;}
p.b { font-size: 120%;}
p.c { font-size: 1.5em;}
p.d { font-size: small;}
</style>
</head>
<body>
<h1>Font-size </h1>
<p class="a">This is some text.</p>
<p class="b">This is some text.</p>
<p class="c">This is some text.</p>
<p class="d">This is some text.</p>
</body>
</html>لتكن النتيجة
font-style شكل الخط
يمكن ان يظهر الخط بشكل مائل لظبط هذا التنسيق للخط مع CSS تُستخدم خاصية نمط الخط font-style في الغالب لتحديد نص مائل هذه الخاصية لها ثلاث قيم:
- normal لعرض النص بشكل طبيعي.
- italic ليظهر النص بخط مائل.
- oblique ايضاً ليظهر النص بخط مائل.
ملاحظة : oblique مشابه جدًا للخط italic ، ولكنه أقل دعمًا في المتصفحات.
و يشرح المثال طريقة تنسيق الخط مع الخاصية font-style :
<!DOCTYPE html>
<html>
<head>
<style>
p.a { font-style: normal;}
p.b { font-style: italic;}
p.c { font-style: oblique;}
</style>
</head>
<body>
<h1>Font-style </h1>
<p class="a">This is some text.</p>
<p class="b">This is some text.</p>
<p class="c">This is some text.</p>
</body>
</html>
لتكن النتيجة
font-weight سُمك الخط
يعد ضبط سُمك الخط ضروروي للصفحات الويب بالنسبة للمعاير الـ SEO. توفر الـ CSS خاصية font-weight للتحكم بعرض الخط .أي تسمح هذه الخاصية بتحديد مدى سمك الخط اي ما اذا كان سميك (خط عريض) bold او رفيع light وتمثلها قيمها بكلمات اساسية او قيم رقمية بحيث كلما زادت القيمة الرقمية زاد السُمك.
المثال التالي يشرح طريقة تنسيق الخط مع الخاصية font-weight :
<!DOCTYPE html>
<html>
<head>
<style>
p.a { font-weight: normal;}
p.b { font-weight:bold;}
p.c { font-weight:lighter;}
p.d { font-weight:900;}
</style>
</head>
<body>
<h1>Font-weight </h1>
<p class="a">This is some text.</p>
<p class="b">This is some text.</p>
<p class="c">This is some text.</p>
<p class="d">This is some text.</p>
</body>
</html>
لتكن النتيجة
تعد هذه الخصائص أبرز الخصائص للتنسيق الخطوط في CSS ويجب أن نذكر هنا أن أنواع الخطوط Font-families يمكن إدراجها كمصدر ضمن ملفات المشروع الذي نعمل عليه أو ربط المشروع بمكتبات خطوط على الانترنت مثل مكتبة الخطوط الخاصة بـ Google وهي Google fonts ثم إدراج الخطوط التي نريد في المشروع يوجد تطبيق علمي على هذا مع بقية أمثلة هذا المقال على هذا الرابط هنـا.
أفضل الممارسات التي يفضل اتباعها عند تنسيق الخطوط في CSS
تتوفر بعض الممارسات الجيدة التي يمكن اتباعها لضمان تحقيق تنسيق نصي مرئي ومتسق عند تنسيق الخطوط ، فيما يلي بعض أفضل الممارسات التي يمكننا اتباعها:
- اختيار الخط المناسب: اختيار الخطوط التي تتناسب مع طبيعة المحتوى ونوع الموقع. يفضل استخدام خطوط سهلة القراءة ومقروءة بوضوح على شاشات مختلفة. كما يجب التأكد من أن الخطوط متوافقة مع معظم أنظمة التشغيل والمتصفحات.
- استخدم الاحتياطات: عند تعيين الخطوط، يستحسن استخدام قائمة من الخطوط المفضلة مع تحديد احتياطات مناسبة. هذا يضمن أن النص سيعرض بشكل صحيح حتى إذا لم يكن الخط الأول متوفرًا على جهاز المستخدم.
- التحكم في حجم الخط: استخدم وحدات محددة بشكل صحيح عند تحديد حجم الخط. يمكنك استخدام البكسل لتحديد حجم الخط الثابت، أو الوحدات النسبية مثل em أو rem لتعديل حجم الخط استنادًا إلى عنصر الأصل الذي يحتوي عليه النص.
- تحديد سمك الخط بشكل صحيح: يفضل استخدام خاصية font-weight لتحديد سمك الخط. قم بتحديد القيمة المناسبة للحصول على سمك الخط المطلوب، مثل normal للخط العادي و bold للخط الغامق. يمكنك أيضًا استخدام الأرقام الرقمية مثل 400 و 700 لضبط سمك الخط بدقة.
- التأكد من تباعد الحروف: عند استخدام خاصية letter-spacing لتعديل تباعد الحروف في النص. تجنب إضافة تباعد زائد بين الحروف، حيث يمكن أن يؤثر على قراءة النص.
- الاعتدال في استخدام التأثيرات: استخدم التأثيرات مثل text-decoration و text-shadow بحذر. قد يؤدي استخدامها بشكل مفرط إلى تشتيت الانتباه وتقليل قابلية القراءة. استخدم التأثيرات بشكل متزن وفقًا لنوع المحتوى والتصميم.
- احترام التباعد بين الأسطر: عند استخدام خاصية line-height لتحديد ارتفاع الخط باستخدام القيم المناسبة لـ line-height، يستحسن ضبط تباعد مناسب بين الأسطر.و يُفضّل استخدام قيمة normal للحصول على التباعد الافتراضي الذي يتناسب مع الخط المستخدم. إذا كنت ترغب في زيادة تباعد الأسطر قليلًا، فيمكنك استخدام قيمة أعلى من normal، مثل 1.2 أو 1.5، وتعديلها وفقًا للتصميم العام للصفحة.
- الاحتفاظ بالتسلسل الهرمي: عند تطبيق تنسيقات الخطوط على عناصر HTML المختلفة، تأكد من الاحتفاظ بالتسلسل الهرمي (hierarchy) الصحيح للعناصر. يعني هذا أن يجب استخدام التنسيقات العامة على مستوى الصفحة (مثل body)، وبعدها تحديد التنسيقات الخاصة بعناصر العناوين، الفقرات، الروابط، وغيرها.
- اختبار في متصفحات متعددة: تأكد من اختبار تنسيق الخطوط على متصفحات مختلفة وأجهزة مختلفة للتأكد من أنه يعرض بشكل صحيح ومتناسق. قد يظهر النص بطرق مختلفة على متصفحات مختلفة، لذا يجب اختباره بشكل شامل.
- الاحتفاظ بالبساطة: يُفضّل الاحتفاظ بالبساطة وعدم إضافة تعقيدات زائدة في تنسيق الخطوط. استخدم تأثيرات الخطوط بحذر وبشكل متزن لتعزيز القراءة وتحسين تجربة المستخدم.
باستخدام هذه الممارسات الجيدة، يمكننا تحقيق تنسيق خطوط مذهل ومتسق في CSS. قم بتجربة مختلف الخصائص والقيم وتحسين تنسيق الخطوط و لتحقيق تجربة قراءة مريحة وجذابة للمستخدمين.
من خلال تجربة مختلف القيم وتركيبات الخصائص المذكورة أعلاه، يمكننا تحقيق تأثيرات تنسيق خطوط مميزة تتناسب مع أسلوب ومحتوى موقعك.إلى هنا ينتهي هذا المقال الذي تعرفنا فيه على الخصائص التي توفرها CSS لتنسيق الخطوط (Font Properties) . تعرفنا على طُرق تنسيق نوع الخط وحجمه وكيف يمكن التحكم بعرض ونمط الخط ، مع أمثلة عليها.