CSSالخطوط

مفهوم الخطوط

أي نص يتم عرضه في الصفحة سواء كان عنوان، فقرة، مربع نص، زر، رابط فإنه يجب تحديد نوع و حجم الخط ( Font ) الخاص به حتى يظهر بشكل واضح للمستخدم و مناسب لتصميم الصفحة بشكل عام.

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

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

تحديد نوع الخط

لتحديد نوع الخط نستخدم الخاصية font-family و نضع إسم الخط كقيمة.

في المثال التالي قمنا بجعل نص العنوان و الفقرة يظهران بالخط Tahoma.
تذكر: إن لم يكن هذا الخط متاح في جهازك فإن المتصفح سيستخدم الخط الإفتراضي.

h1, p {
    font-family: Tahoma;
}

قواعد كتابة إسم الخط

يجب اتباع الأساليب التالية عندك كتابة أسماء الخطوط:

إذا كان إسم الخط يتألف من كلمة واحدة، يمكنك وضعه كما هو.
مثال font-family: Arial

إذا كان إسم الخط يتألف من أكثر من كلمة و بينهما شرطة فيمكنك وضعه كما هو.
مثال font-family: sans-serif

إذا كان إسم الخط يتألف من أكثر من كلمة و بينهما مسافة فارغة فيجب وضعه بين ' ' أو " ".
مثال font-family: "Courier New"

إضافة خطوط إحتياطية

بما أننا لا نضمن أن يعمل نوع الخط على جميع أجهزة المستخدمين يجب أن نضع عدة خطوط أخرى مشابهة له ليتم استخدام أحدها في حال عدم وجود الخط الأساسي في جهاز المستخدم.

CSS تتيح لك وضع إسم أكثر من خط كقيمة للخاصية font-family مع وضع فاصلة بينهم. و عندها يقوم المتصفح بمحاولة استخدام الخط الأول، إن لم يجده متوفراً في جهاز المستخدم سيستخدم الخط التالي الموضوع بعده و هكذا.

في المثال التالي أول خط سيجرب المتصفح استخدامه هو Tahoma، إن لم يجده سيجرب الخط Verdana الموضوع بعده، إن لم يجده سيجرب الخط sans-serif الموضوع بعده. في حال فشل في استخدام جميع الخطوط فإنه سيستخدم الخط الإفتراضي في المتصفح.

h1, p {
    font-family: Tahoma, Verdana, sans-serif;
}

خطوط متشابهة في الشكل

1- الخطوط التالية تنتدرج تحت مسمى serif.

font-family: "Times New Roman", Times, serif;
font-family: Georgia, serif;
font-family: Garamond, serif;

2- الخطوط التالية تنتدرج تحت مسمى sans-serif.

font-family: Arial, Helvetica, sans-serif
font-family: Tahoma, Verdana, sans-serif;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-family: Geneva, Verdana, sans-serif;

3- الخطوط التالية تنتدرج تحت مسمى monospace.

font-family: "Courier New", Courier, monospace;

4- الخطوط التالية تنتدرج تحت مسمى cursive.

font-family: "Brush Script MT", cursive;

5- الخطوط التالية تنتدرج تحت مسمى fantasy.

font-family: Copperplate, Papyrus, fantasy;

خصائص الخطوط

مهما كان نوع الخط المستخدم فإنك تستطيع تطبيق الخصائص التالية عليه.

إمالة الخط

لتحديد ما إن كان الخط سيظهر بشكل مائل أو عادي يمكنك إضافة الخاصية font-style له و تمرير إحدى القيم التالية:

في المثال التالي قمنا بجعل النص يظهر بشكل مائل.

.italic {
    font-style: italic;
}

تعريض الخط

لتحديد ما إن كان الخط سيظهر بشكل عريض أو عادي يمكنك إضافة الخاصية font-weight له و تمرير إحدى القيم التالية:

في المثال التالي قمنا بجعل النص يظهر بشكل عريض.

.thick {
    font-weight: bold;
}

تغيير حجم الأحرف الصغيرة

النص الذي يحتوي أحرف أجنبية مثل الأحرف الإنجليزية التي يمكن كتابتها بشكل كبير ( Capital Letters ) و بشكل صغير ( Small Letters ) يمكن جعل أحرفها الصغيرة تظهر بشكلها الكبير و لكن بحجم صغير متباين عن حجم الأحرف الكبيرة من خلال إضافة الخاصية font-variant له و تمرير إحدى القيم التالية:

في المثال التالي قمنا بجعل الأحرف الصغير تظهر كأحرف كبيرة و لكن بحجم أصغر.

p {
    font-variant: small-caps;
}

تحديد حجم الخط

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

الجدول التالي يوضح الفرق بين وحدات القياس التي يمكنك استخدامها لتحديد أحجام الخطوط.

الفرق بين حجم الخط الثابت و المتغير

حجم الخط الثابت ( Absolute ) يقصد به أنه لا يتغيير إذا قام المستخدم بتغييره من إعدادات المتصفح أو قام باستخدام جهاز حجم شاشته مختلف.

حجم الخط المتغير ( Relative ) هو الذي يتغير نسبةً للحجم الذي حدده المستخدم في إعدادات المتصفح أو نسبةً لحجم العنصر الأب أو نسبةً لحجم الشاشة نفسها.

تحديد الحجم بالوحدة px

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة px.

h1 {
    font-size: 36px;
}

h2 {
    font-size: 24px;
}

p {
    font-size: 14px;
}

تحديد الحجم بالوحدة em

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

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة em.

h1 {
    font-size: 2.5em;  /* 2.5em x 16 = 40px */
}

h2 {
    font-size: 1.5em;  /* 1.5em x 16 = 24px */
}

p {
    font-size: 0.875;  /* 1.5em x 16 = 24px */
}

تحديد الحجم بالوحدة rem

الوحدة rem تحول نسبتها إلى px نسبةً لحجم الخط الموضوع في الوسم <html> و بالتالي إذا وضعت حجم خطه 16px فإن 1rem = 16px.

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة rem.

html {
    font-size: 16px;
}

h1 {
    font-size: 2.5rem;  /* 2.5rem x 16 = 40px */
}

h2 {
    font-size: 1.5rem;  /* 1.5rem x 16 = 24px */
}

p {
    font-size: 0.875rem;  /* 1.5rem x 16 = 24px */
}

تحديد الحجم بالوحدة %

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة %.

body {
    font-size: 16px;
}
            
h1 {
    font-size: 250%;  /* 250% / 16 = 40px */
}

h2 {
    font-size: 150%;  /* 150% / 16 = 24px */
}

p {
    font-size: 87.5%;  /* 87.5% / 16 = 14px */
}

تحديد الحجم بالوحدة vw

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة vw.

h1 {
    font-size: 10vw;  /* أي 10% بالنسبة لعرض الشاشة */
}

h2 {
    font-size: 7vw;  /* أي 7% بالنسبة لعرض الشاشة */
}

p {
    font-size: 3.5vw;  /* أي 3.5% بالنسبة لعرض الشاشة */
}

تحديد الحجم بالوحدة vh

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة vh.

h1 {
    font-size: 10vw;  /* أي 10% بالنسبة لطول الشاشة */
}

h2 {
    font-size: 7vw;  /* أي 7% بالنسبة لطول الشاشة */
}

p {
    font-size: 3.5vw;  /* أي 3.5% بالنسبة لطول الشاشة */
}

تعريف كل خصائص الخط بسطر واحد

جميع خصائص الخط يمكنك تحديدها للعنصر دفعة واحدة من خلال وضع الخاصية font و تمرير خصائص القيم التالية لها بالترتيب:

في المثال التالي قمنا بإضافة كل خصائص الخط بشكل مختصر.

h1 {
    font: small-caps bold 40px/1 cursive;
}
            
p {
    font: italic small-caps bold 16px/2 cursive;
}

استخدام خطوط جوجل

هناك أنواع خطوط عديدة تكون موجودة في أغلب أجهزة المستخدمين مثل arial و serif و غيرهما تستطيع استخدامها إن أردت و لكن لا ينصح باستخدام هذه الخطوط لأنها ليست جميلة مقارنةً بأنواع الخطوط المجانية الرائعة التي يمكنك تحميلها جوجل.

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

تعلم استخدام خطوط جوجل