تنسيق الخطوط في لغة CSS
يعد اختيار الخط والنمط المناسبين أمرًا بالغ الأهمية لإمكانية قراءة النص على صفحة الويب.
توفر لغة CSS العديد من الخصائص لتنسيق خط النص ، بما في ذلك تغيير نوعه ، والتحكم في حجمه وسماكته ، وما إلى ذلك.
خصائص الخط هي: font-family و font-style و font-weight و font-size و font-variant.
دعونا نناقش كل من خصائص الخط هذه واحدة تلو الأخرى بمزيد من التفصيل.
Font Family
يتم استخدام الخاصية font-family لتحديد الخط الذي سيتم استخدامه لعرض النص في متصفح الويب.
يمكن أن تحتوي هذه الخاصية على العديد من أسماء الخطوط المفصولة بفواصل كخطوط احتياطية ، بحيث إذا لم يكن الخط الأول متاحًا على نظام المستخدم ، يحاول المتصفح استخدام الخط الثاني ، وما إلى ذلك.
قم بإدراج الخط الذي تريده أولاً ، ثم أي خط يكون بديلا للخط الأول إذا لم يكن متاحًا. يجب عليك إنهاء القائمة بعائلة خط عامة تتكون من إحدى هذه العائلات الخمس: serif و sans-serif و monospace و cursive و fantasy.
ولفهم كيفة عمله دعونا نلقي نظرة على المثال التالي :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تحديد الخط في لغة CSS</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
المخرجات
إذا احتوى اسم الخط او عائلة الخط على أكثر من كلمة واحدة ، فيجب وضعه داخل علامات اقتباس ، مثل "Times New Roman" و "Courier New" و "Segoe UI" ، إلخ.
Font Style
تُستخدم الخاصية font-styleلتحديد شكل الخط لمحتوى النص لعنصر.
كما انه من الممكن استخدام القيم التالية للخاصية font-style :
normalوهي القيمة الافتراضية.italicoblique
ولفهم كيفة عمل هذه الخاصية دعونا نلقي نظرة على المثال التالي :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تحديد شكل الخط</title>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This is a normal paragraph.</p>
<p class="italic">This is a paragraph with italic font style.</p>
<p class="oblique">This is a paragraph with oblique font style.</p>
</body>
</html>
المخرجات
للوهلة الأولى ، تظهر نتيجة كل من القيمة oblique و italic نفس الشيء ، ولكن هناك فرق. تستخدم القيمة italic نسخة مائلة من الخط في حال توافرها بينما تعطي القيمة oblique الشكل المائل لنفس النسخة من الخط العادي.
Font Size
يتم استخدام الخاصية font-size لتحديد حجم الخط لمحتوى النص للعنصر.
هناك عدة طرق لتحديد القيمة للخاصية font-size مثل كلمات رئيسية اوالنسبة المئوية او بالبكسل او ems ، إلخ.
تحديد حجم الخط بالبكسل
البكسل Pixels ويرمز لها بالإختصار px وهي وحدة قياس مطلقة تحدد طولًا ثابتًا . بكسل واحد يساوي نقطة واحدة على شاشة الكمبيوتر.
ولفهم كيفة استخدام هذه القيمة دعونا نلقي نظرة على المثال التالي :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تحديد حجم الخط بالقيمة بكسل</title>
<style>
h1 {
font-size: 24px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
المخرجات
لا يعتبر استخدام أحجام الخط بالبكسل طريقة مثالية ، لأنه لا يمكن للمستخدم تغيير حجم الخط من إعدادات المتصفح. على سبيل المثال ، قد يرغب المستخدمون ذوو الرؤية المحدودة أو الضعيفة في تحديد حجم خط أكبر بكثير من الحجم الذي تحدده.
لذلك ، يجب عليك تجنب استخدام قيم البكسل واستخدام القيم المتعلقة بحجم الخط الافتراضي للمستخدم بدلاً من ذلك إذا كنت ترغب في إنشاء تصميم متقن.
يمكننا أيضًا تغيير حجم النص في جميع المتصفحات باستخدام ميزة التكبير / التصغير zoom . ومع ذلك ، تقوم هذه الميزة بتغيير حجم الصفحة بأكملها ، وليس النص فقط. توصي W3C باستخدام قيم em أو النسبة المئوية (٪) لإنشاء تصاميم أكثر قوة وقابلة للتطوير.
تحديد حجم الخط بال EM
تشير وحدة em إلى حجم الخط بالنسبة للعنصر الأب. عند اعطاء القيمة 1em للخاصية font-size هذا يعني ان حجم الخط للعنصر يساوي حجم الخط للعنصر الاب.
بمعنى اخر إذا قمنا بتحديد حجم خط 20px للعنصر body ، فإن 1em = 20px و 2em = 40px لكل عنصر داخل صفحة الويب.
اما في حال لم نحدد حجم خط في أي مكان على الصفحة عندئذ ستكون القيمة هي القيمة الافتراضية المحددة لمتصفح الويب وبالعادة تكون 16px . لذلك ، بشكل افتراضي 1em = 16px ، و 2em = 32px.
ولفهم كيفة استخدام هذه القيمة دعونا نلقي نظرة على المثال التالي :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تحديد حجم الخط بال EM</title>
<style>
h1 {
font-size: 2em; /* 32px/16px=2em */
}
p {
font-size: 0.875em; /* 14px/16px=0.875em */
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a <span>paragraph</span>.</p>
</body>
</html>
المخرجات
الجمع بين النسبة المئوية % و EM
كما لاحظنا في المثال أعلاه ، احيانا لا يمكن حساب قيم em بسهولة. ولتبسيط ذلك ، من الأساليب الشائعة تحديد حجم الخط للعنصر body بالقيمة 62.5٪ (أي 62.5٪ من الحجم الافتراضي 16px) ، اي ما يعادل 10px أو 0.625em.
الآن يمكننا تحديد حجم الخط لأي عناصر باستخدام وحدات em بسهولة و مع طريقة تحويل سهلة التذكر ، عن طريق قسمة قيمة البكسل على 10. بهذه الطريقة 10px = 1em، 12px = 1.2em ، 14px = 1.4em ، 16px = 1.6em.
ولفهم ذلك دعونا نلقي نظرة على المثال التالي :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>الجمع بين النسبة المئوية % و EM</title>
<style>
body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.4em; /* 1.4em = 14px */
}
p span {
font-size: 2em; /* 2em = 28px */
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a <span>paragraph</span>.</p>
</body>
</html>
المخرجات
تحديد حجم الخط بإستخدام Root EM
لجعل الأمور أكثر بساطة ، قدمت لنا لغة CSS بإصدارها الاخير CSS3 وحدة rem (اختصار لـ "root em") والتي ترتبط دائمًا بحجم خط العنصر الجذر <html> ، بغض النظر عن مكان العنصر في المستند (بخلاف em الذي هو نسبة إلى حجم الخط للعنصر الأب).
وهذا يعني أن 1rem يعادل حجم خط عنصر html ، وهو 16px بشكل افتراضي في معظم المتصفحات.
ولفهم كيفة استخدام هذه القيمة دعونا نلقي نظرة على المثال التالي :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تحديد حجم الخط بإستخدام Root EM
</title>
<style>
html {
font-size: 62.5%; /* font-size 1em = 10px */
}
body {
font-size: 1.6rem; /* 1.6rem = 16px */
}
p {
font-size: 1.4rem; /* 1.4rem = 14px */
}
p span {
font-size: 2rem; /* 2rem = 20px (not 28px) */
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a <span>paragraph</span>.</p>
</body>
</html>
المخرجات
تحديد حجم الخط باستخدام الكلمات المحجوزة Keywords
توفر لغة CSS العديد من الكلمات المحجوزة Keywords التي يمكننا استخدامها لتحديد أحجام الخطوط.
يمكن تحديد حجم الخط المطلق باستخدام إحدى الكلمات الأساسية التالية: xx-small و x-small و small و medium و large و x-large و xx-large. بينما يمكن تحديد حجم الخط النسبي باستخدام الكلمات المحجوزة التالية: smaller أو larger.
ولفهم كيفة استخدام هذه القيم دعونا نلقي نظرة على المثال التالي :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تحديد حجم الخط باستخدام الكلمات المحجوزة Keywords</title>
<style>
body {
font-size: large;
}
h1 {
font-size: larger;
}
p {
font-size: smaller;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
المخرجات
إن الكلمة المحجوزة medium تعادل حجم الخط الافتراضي للمتصفحات ، والذي عادة ما يكون 16px. وبالمثل ، فإن xx-small تعادل 9px ، و x-small تعادل 10px ، و small تعادل 13px ، و large تعادل 18px ، و x-large تعادل 24px ، و xx-large تعادل 32px.
تحديد حجم الخط بإستخدام وحدات إطار العرض Viewport Units
يمكننا تحديد أحجام الخطوط باستخدام وحدات إطار العرض viewport units مثل vw أو vh.
تشير وحدات إطار العرض إلى النسبة المئوية من أبعاد إطار العرض في المتصفح ، حيث 1vw = 1٪ من عرض إطار العرض ، و 1vh = 1٪ من ارتفاع إطار العرض. وبالتالي ، إذا كان إطار العرض بعرض 1600px ، فإن 1vw يساوي 16px.
ولفهم كيفة عمل هذه القيم دعونا نلقي نظرة على المثال التالي :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تحديد حجم الخط بإستخدام وحدات إطار العرض Viewport Units</title>
<style>
body {
font-size: 1vw;
}
h1 {
font-size: 3vw;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
المخرجات
ومع ذلك ، هناك مشكلة في وحدات إطار العرض على الشاشات الصغيرة ، تصبح الخطوط صغيرة جدًا بحيث يصعب قراءتها. ولحل هذه المشكلة يمكننا استخدام الدالة calc() ، كما في المثال التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>إصلاح مشكلة حجم الخط مع وحدات إطار العرض</title>
<style>
html {
font-size: calc(1em + 1vw);
}
h1 {
font-size: 3rem;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
المخرجات
في المثال اعلاه ، حتى إذا أصبح عرض إطار العرض 0px ، فإن حجم الخط سيكون على الأقل 1em أو 16px.
Font Weight
تحدد الخاصية font-weight سمك الخط.
يمكن أن تأخذ هذه الخاصية إحدى القيم التالية: normal و bold و bolder و lighter و 100و 200و300 و 400و 500و 600و 700و 800و 900 و inherit.
تحدد القيم الرقمية 100-900 سمك الخط ، حيث يمثل كل رقم سمكاً أكبر من سابقه. 400 هو نفسه normal و 700 هو نفسه bold.
القيم الأكثر bolder وأخف lighter تتعلق بسمك الخط بالنسبة للعنصر الأب ، في حين أن القيم الأخرى مثل normal وbold هي قيم مطلقة.
ولفهم كيفة عمل هذه الخاصية دعونا نلقي نظرة على المثال التالي :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تحدد سمك الخط في لغة CSS</title>
<style>
p {
font-weight: bold;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph in bold font.</p>
</body>
</html>
المخرجات
معظم الخطوط لا تتوافر فيها جميع القيم المتاحة للخاصية font-weight . والقيم المتوفرة غالبًا تكون فقط normal و bold. في هذه الحالة ، إذا لم يكن الخط متاحًا في السمك المحدد ، فسيتم اختيار بديل هو أقرب سمك متاح.
Font Variant
تسمح الخاصية font-variant بعرض النص في شكل أحرف صغيرة small-caps خاصة.
تختلف الأحرف الصغيرة او ما تعرف ب Small-caps اختلافًا طفيفًا عن الأحرف الكبيرة العادية او ما تعرف ب capital letters ، حيث تظهر الأحرف الصغيرة كنسخ أصغر من الأحرف الكبيرة.
لنجرب المثال التالي لفهم كيفية عمل هذه الخاصية:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-variant in CSS</title>
<style>
p {
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
المخرجات
تزيل القيمة normal الحروف المنسقة بشكل small caps من النص المنسق مسبقا بهذه الطريقة.