CSSالخطوط
- مفهوم الخطوط
- تحديد نوع الخط
- إضافة خطوط إحتياطية
- خصائص الخطوط
- تحديد حجم الخط
- تعريف كل خصائص الخط بسطر واحد
- استخدام خطوط جوجل
مفهوم الخطوط
أي نص يتم عرضه في الصفحة سواء كان عنوان، فقرة، مربع نص، زر، رابط فإنه يجب تحديد نوع و حجم الخط ( Font ) الخاص به حتى يظهر بشكل واضح للمستخدم و مناسب لتصميم الصفحة بشكل عام.
لاحظ كيف أن النص التالي يظهر بشكل سيء في البداية و لكنه في النهاية يظهر بشكل جميل لأن نوع الخط الذي استخدمناه في الأخير أفضل و أسهل في القراءة.
في هذا الدرس ستتعلم كيف تحدد نوع و حجم الخط، كيف تستخدم خطوط جوجل، كيف تضع خطوط إحتياطية ليستعملها المتصفح إن لم يجد الخطوط الأساسية الموضوعة.
تحديد نوع الخط
لتحديد نوع الخط نستخدم الخاصية font-family و نضع إسم الخط كقيمة.
إسم الخط الذي تضعه كقيمة قد لا يكون موجوداً في جهاز المستخدم أو حتى في جهازك أنت. و في هذه الحالة فإن المتصفح يستخدم أي خط إفتراضي متاح فيه.
في المثال التالي قمنا بجعل نص العنوان و الفقرة يظهران بالخط Tahoma.
تذكر: إن لم يكن هذا الخط متاح في جهازك فإن المتصفح سيستخدم الخط الإفتراضي.
قواعد كتابة إسم الخط
يجب اتباع الأساليب التالية عندك كتابة أسماء الخطوط:
إذا كان يتألف من كلمة واحدة، يمكنك وضعه كما هو.
مثال: font-family: Arial;
إذا كان يتألف من أكثر من كلمة و بينهما شرطة، يمكنك وضعه كما هو.
مثال: font-family: sans-serif;
إذا كان يتألف من أكثر من كلمة و بينهما مسافة فارغة، يجب وضعه بين ' ' أو " ".
مثال: font-family: "Courier New";
إضافة خطوط إحتياطية
بما أننا لا نضمن أن يعمل نوع الخط على جميع أجهزة المستخدمين يجب أن نضع عدة خطوط أخرى مشابهة له ليتم استخدام أحدها في حال عدم وجود الخط الأساسي في جهاز المستخدم.
CSS تتيح لك وضع إسم أكثر من خط كقيمة للخاصية font-family مع وضع فاصلة بينهم. و عندها يقوم المتصفح بمحاولة استخدام الخط الأول، إن لم يجده متوفراً في جهاز المستخدم سيستخدم الخط التالي الموضوع بعده و هكذا.
هذا الأسلوب في تحديد الخطوط يسمى وضع خطوط إحتياطية ( Fallback Fonts ).
في المثال التالي أول خط سيجرب المتصفح استخدامه هو 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 | لجعل النص يظهر بشكل مائل. |
| normal | لجعل النص يظهر بشكل عادي. |
في المثال التالي قمنا بجعل النص يظهر بشكل مائل.
تعريض الخط
لتحديد ما إن كان الخط سيظهر بشكل عريض أو عادي يمكنك إضافة الخاصية font-weight له و تمرير إحدى القيم التالية:
| القيمة | معناها |
|---|---|
| bold | لجعل النص يظهر بشكل عريض. |
| normal | لجعل النص يظهر بشكل عادي. |
| <number> | و هنا نقصد وضع رقم يحدد درجة عرض الخط، فمثلاً حجم الخط normal يمكن كتاتبه 400 و حجم الخط bold يمكن كتابته 700.هذا الأمر سيمر معك حين نعلمك طريقة استخدام خطوط جوجل. |
في المثال التالي قمنا بجعل النص يظهر بشكل عريض.
تغيير حجم الأحرف الصغيرة
النص الذي يحتوي أحرف أجنبية مثل الأحرف الإنجليزية التي يمكن كتابتها بشكل كبير ( Capital Letters ) و بشكل صغير ( Small Letters ) يمكن جعل أحرفها الصغيرة تظهر بشكلها الكبير و لكن بحجم صغير متباين عن حجم الأحرف الكبيرة من خلال إضافة الخاصية font-variant له و تمرير إحدى القيم التالية:
| القيمة | معناها |
|---|---|
| small-caps | لجعل الأحرف الصغيرة تظهر كالأحرف الكبيرة و لكن بحجم أصغر. |
| normal | لجعل النص يظهر بشكل عادي. |
في المثال التالي قمنا بجعل الأحرف الصغير تظهر كأحرف كبيرة و لكن بحجم أصغر.
تحديد حجم الخط
لتحديد حجم الخط نستخدم الخاصية font-size و نضع رقم بوحدة قياس معينة ليحدد حجم الخط.
الجدول التالي يوضح الفرق بين وحدات القياس التي يمكنك استخدامها لتحديد أحجام الخطوط.
| الوحدة | معناها |
|---|---|
| px | لجعل حجم الخط ثابت و لا يتأثر بإعدادات حجم الخط الموضوعة في المتصفح. |
| em | لجعل حجم الخط يتغير نسبةً لحجم الخط الموضوع في العنصر الأب. |
| rem | لجعل حجم الخط يتغير نسبةً لحجم الخط الموضوع في أعلى عنصر في الصفحة و الذي هو العنصر <html>. |
| % | لجعل حجم الخط يتحدد بشكل مئوي و بالتالي يتغير نسبةً لحجم العنصر الأب الموضوع فيه. |
| vw | إذا كان النص سيُعرض على كامل عرض الشاشة فيمكن استخدام هذه الوحدة لتحديد حجم الخط نسبةً لعرضها. |
| vh | إذا كان النص سيُعرض على كامل طول الشاشة فيمكن استخدام هذه الوحدة لتحديد حجم الخط نسبةً لطولها. |
حجم الخط الإفتراضي للنصوص العادية التي يتم وضعها في الفقرات هو 16px و هذا يساوي 1em أيضاً.
الفرق بين حجم الخط الثابت و المتغير
حجم الخط الثابت ( Absolute ) يقصد به أنه لا يتغيير إذا قام المستخدم بتغييره من إعدادات المتصفح أو قام باستخدام جهاز حجم شاشته مختلف.
حجم الخط المتغير ( Relative ) هو الذي يتغير نسبةً للحجم الذي حدده المستخدم في إعدادات المتصفح أو نسبةً لحجم العنصر الأب أو نسبةً لحجم الشاشة نفسها.
تحديد الحجم بالوحدة px
في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة px.
مثال
تحديد الحجم بالوحدة em
الوحدة em تحول نسبتها إلى px نسبةً لحجم الخط الموضوع في المتصفح، إفتراضياً حجم الخط في المتصفح هو 16px و بالتالي 1em = 16px.
في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة em.
مثال
تحديد الحجم بالوحدة rem
الوحدة rem تحول نسبتها إلى px نسبةً لحجم الخط الموضوع في الوسم <html> و بالتالي إذا وضعت حجم خطه 16px فإن 1rem = 16px.
في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة rem.
مثال
تحديد الحجم بالوحدة %
في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة %.
مثال
تحديد الحجم بالوحدة vw
في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة vw.
مثال
تحديد الحجم بالوحدة vh
في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة vh.
مثال
تعريف كل خصائص الخط بسطر واحد
جميع خصائص الخط يمكنك تحديدها للعنصر دفعة واحدة من خلال وضع الخاصية font و تمرير خصائص القيم التالية لها بالترتيب:
عند تحديد خصائص الخط بشكل مختصر يمكنك عدم ذكرها كلها إن لم ترد تحديدها و لكنك مجبر على تحديد حجم الخط font-size و نوعه font-family لأنها خصائص إجبارية و ليست إختيارية كباقي الخصائص.
في المثال التالي قمنا بإضافة كل خصائص الخط بشكل مختصر.
مثال
استخدام خطوط جوجل
هناك أنواع خطوط عديدة تكون موجودة في أغلب أجهزة المستخدمين مثل arial و serif و غيرهما تستطيع استخدامها إن أردت و لكن لا ينصح باستخدام هذه الخطوط لأنها ليست جميلة مقارنةً بأنواع الخطوط المجانية الرائعة التي يمكنك تحميلها جوجل.
معظم المواقع تستخدم خطوط جوجل سواء كانت مواقع أجنبية أو عربية و بالطبع في تصاميمك التي تبنيها في المستقبل ننصحك أيضاً باستخدامها.
