خطوط CSS

يعد اختيار الخط والنمط المناسبين أمرًا بالغ الأهمية لسهولة قراءة النص على الصفحة.

يوفر CSS العديد من الخصائص لتصميم خط النص ، بما في ذلك تغيير وجههم ، والتحكم في حجمهم وجرأتهم ، وإدارة المتغير ، وما إلى ذلك.

خصائص الخط هي : font-familyو font-styleو font-weightو font-size.font-variant

دعونا نناقش كل من خصائص الخط هذه واحدة تلو الأخرى بمزيد من التفصيل.

خط العائلة

يتم font-familyاستخدام الخاصية لتحديد الخط الذي سيتم استخدامه لتقديم النص.

يمكن أن تحتوي هذه الخاصية على عدة أسماء خطوط مفصولة بفواصل كنظام احتياطي ، بحيث إذا لم يكن الخط الأول متاحًا في نظام المستخدم ، فسيحاول المستعرض استخدام الخط الثاني ، وهكذا.

ومن ثم ، قم بإدراج الخط الذي تريده أولاً ، ثم أي خطوط قد تملأ لأول مرة إذا لم تكن متوفرة. يجب أن تنهي القائمة بمجموعة خطوط عامة تتكون من خمسة - serifو sans-serifو monospaceو cursive. fantasyقد يبدو بيان عائلة الخط النموذجي كما يلي:

body {
    font-family: Arial, Helvetica, sans-serif;
}

أكثر مجموعات الخطوط شيوعًا المستخدمة في تصميم الويب هي serif و sans-serif ، لأنها أكثر ملاءمة للقراءة. بينما تُستخدم الخطوط أحادية المسافة بشكل شائع لعرض الكود ، لأن كل حرف في هذا الخط يشغل نفس المساحة التي تبدو وكأنها نص مكتوب على الآلة الكاتبة.

تبدو الخطوط المتصلة مثل الكتابة المتصلة أو الكتابة اليدوية. يمثل الخط الخيالي خطًا فنيًا ، لكن لا يتم استخدامه على نطاق واسع بسبب ضعف التوافر عبر أنظمة التشغيل.

الفرق بين خطوط Serif و Sans-serif

تحتوي خطوط Serif على خط صغير أو حد عند أطراف الأحرف ، بينما خطوط sans-serif أكثر استقامة ولا تحتوي على هذه الخطوط الصغيرة. انظر الرسم التوضيحي التالي.

للتعرف على مجموعات الخطوط شائعة الاستخدام ، يرجى مراجعة المرجع على خطوط الويب الآمنة .

نوع الخط

تُستخدم font-styleالخاصية لتعيين نمط وجه الخط لمحتوى نص العنصر.

يمكن أن يكون نمط الخط normalأو . القيمة الافتراضية هي .italicobliquenormal

دعنا نجرب المثال التالي لفهم كيفية عمله بشكل أساسي:

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

حجم الخط

تُستخدم font-sizeالخاصية لتعيين حجم الخط لمحتوى نص العنصر.

هناك عدة طرق لتحديد قيم حجم الخط ، على سبيل المثال مع الكلمات الرئيسية ، والنسبة المئوية ، والبكسل ، و ems ، إلخ.

ضبط حجم الخط بالبكسل

يعد تعيين حجم الخط بقيم البكسل (مثل 14 بكسل و 16 بكسل وما إلى ذلك) اختيارًا جيدًا عندما تحتاج إلى دقة البكسل. البكسل هو وحدة قياس مطلقة تحدد طولًا ثابتًا.

دعنا نجرب المثال التالي لفهم كيفية عمله بشكل أساسي:

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

تحديد أحجام الخط بالبكسل لا يمكن الوصول إليه بسهولة ، لأنه لا يمكن للمستخدم تغيير حجم الخط من إعدادات المتصفح. على سبيل المثال ، قد يرغب المستخدمون ذوو الرؤية المحدودة أو الضعيفة في تعيين حجم الخط أكبر بكثير من الحجم الذي تحدده.

لذلك ، يجب تجنب استخدام قيم البكسل واستخدام القيم المتعلقة بحجم الخط الافتراضي للمستخدم بدلاً من ذلك إذا كنت تريد إنشاء تصميم شامل.

ضبط حجم الخط باستخدام EM

تشير emالوحدة إلى حجم خط العنصر الأصلي. عند تحديد font-sizeالخاصية ، 1emيكون مساويًا لحجم الخط الذي ينطبق على العنصر الرئيسي للعنصر .

لذلك ، إذا قمت بتعيين a font-sizeبمقدار 20 بكسل على عنصر الجسم ، فحينئذٍ 1em = 20pxو 2em = 40px.

ومع ذلك ، إذا لم تقم بتعيين حجم الخط في أي مكان على الصفحة ، فهذا هو المتصفح الافتراضي ، والذي يكون عادةً 16 بكسل. لذلك ، بشكل افتراضي 1em = 16px، و 2em = 32px.

دعنا نلقي نظرة على المثال التالي لفهم كيفية عمله بشكل أساسي:

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

باستخدام الجمع بين النسبة المئوية و EM

كما لاحظت في المثال أعلاه ، لا يبدو حساب قيم em مباشرًا. لتبسيط ذلك ، تتمثل إحدى الطرق الشائعة في تعيين font-sizeعنصر الجسم على 62.5%(أي 62.5٪ من 16 بكسل الافتراضي) ، وهو ما يعادل 10 بكسل ، أو 0.625em.

يمكنك الآن ضبط قيمة ال font-sizeلأي عنصر باستخدام وحدات em ، بتحويل سهل التذكر ، بقسمة pxالقيمة على 10. بهذه الطريقة 10px = 1em، 12px = 1.2em، 14px = 1.4em، 16px = 1.6em، وهكذا. دعنا نلقي نظرة على المثال التالي:

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    /* 1.4em = 14px */
}
p span {
    font-size: 2em;    /* 2em = 28px */
}

ضبط حجم الخط باستخدام Root EM

لجعل الأمور أكثر بساطة ، أدخل CSS3 remوحدة (اختصار لـ "root em") والتي ترتبط دائمًا بحجم خط عنصر الجذر ( html) ، بغض النظر عن مكان العنصر في المستند (على عكس emما هو متعلق بالوالد) حجم خط العنصر).

هذا يعني أن هذا 1remيكافئ حجم خط htmlالعنصر ، والذي يكون 16pxافتراضيًا في معظم المتصفحات. دعنا نجرب مثالًا لفهم كيفية عمله بالفعل:

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

ضبط حجم الخط بالكلمات الرئيسية

توفر CSS العديد من الكلمات الأساسية التي يمكنك استخدامها لتحديد أحجام الخطوط.

يمكن تحديد حجم خط مطلق باستخدام إحدى الكلمات الأساسية التالية: xx-small، x-small، small، medium، large، x-large، xx-large. حيث يمكن تحديد حجم خط نسبي باستخدام الكلمات الأساسية: smallerأو larger. لنجرب أحد الأمثلة ونرى كيف يعمل:

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

ضبط حجم الخط مع وحدات منفذ العرض

يمكن تحديد أحجام الخطوط باستخدام وحدات منفذ العرض مثل vwأو vh.

تشير وحدات منفذ العرض إلى نسبة مئوية من أبعاد منفذ العرض في المتصفح ، حيث 1vw = 1٪ من عرض منفذ العرض ، و 1vh = 1٪ من ارتفاع منفذ العرض. ومن ثم ، إذا كان عرض منفذ العرض 1600 بكسل ، فإن 1vw يكون 16 بكسل.

جرب المثال التالي عن طريق تغيير حجم نافذة المتصفح وشاهد كيف يعمل:

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}

ومع ذلك ، هناك مشكلة في وحدات منفذ العرض. على الشاشات الصغيرة ، تصبح الخطوط صغيرة جدًا بحيث يصعب قراءتها. لمنع هذا يمكنك استخدام calc()وظيفة CSS ، مثل هذا:

html { 
    font-size: calc(1em + 1vw); 
}
h1 {
    font-size: 3rem;
}

في هذا المثال ، حتى إذا أصبح عرض منفذ العرض 0 ، فإن حجم الخط سيكون على الأقل 1em أو 16 بكسل.

يمكنك أيضًا استخدام استعلامات وسائط CSS لإنشاء طباعة سلسة ومتجاوبة بشكل أفضل.

وزن الخط

تحدد الخاصية سمك font-weightالخط أو خط غامقه.

يمكن أن تأخذ هذه الخاصية إحدى القيم التالية : normal، bold، bolder، lighter، 100، 200، 300، 400، 500، 600، 700، 800و 900.inherit

• القيم الرقمية 100- 900حدد أوزان الخط ، حيث يمثل كل رقم وزنًا أكبر من سابقه. 400هو نفسه normal& 700هو نفسه bold.
• القيم و هي نسبية لسمك الخط الموروث ، بينما القيم الأخرى مثل bolderو سماكات خط مطلقة.lighternormalbold

دعنا نجرب مثالاً لفهم كيفية عمل هذه الخاصية بشكل أساسي:

p {
    font-weight: bold;
}

متغير الخط

تسمح font-variantالخاصية بعرض النص بأحرف صغيرة خاصة.

تختلف الأحرف الكبيرة الصغيرة أو الكبيرة قليلاً عن الأحرف الكبيرة العادية ، حيث تظهر الأحرف الصغيرة كإصدارات أصغر من الأحرف الكبيرة المقابلة.

جرب المثال التالي لفهم كيفية عمل هذه الخاصية بالفعل:

p {
    font-variant: small-caps;
}