انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 21
دورة لغة CSS

أنواع الخطوط في لغة CSSCSS Font Family

ستتعلم في هذا الدرس تحسين وتغيير fonts خطوط صفحات الويب بلغة CSS ليساعد ذلك في تحسين تصميم صفحت الويب لتكون صفحة حديثة.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
6
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
16,794
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

CSS Font Family أنواع الخطوط في لغة CSS

تحدد font-family عائلة الخط المطلوبة لعرض النص. يمكن استخدام خط مثبت على جهاز المستخدم، أو خط ويب محمل ومُعرّف في CSS. لا تضمن أنظمة Windows وLinux وmacOS وجود الخطوط نفسها.

من أسماء الخطوط الشائعة: Tahoma, Times New Roman, Georgia, Garamond, Arial, Verdana, Helvetica, Courier New, Lucida Console, Monaco, Brush Script MT, Lucida Handwriting, Copperplate, Papyrus. هذه أمثلة لأسماء عائلات، وليست قائمة مضمونة على كل الأجهزة والمتصفحات.

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

أنواع الخطوط في لغة CSS

font family syntax

طريقة كتابة خاصية font family syntax.

CSS 
font-family:value;

CSS font-family Property خاصية font-family في لغة CSS

تقبل font-family اسم عائلة خط، مثل Tahoma، أو قائمة عائلات تفصل بينها فاصلة. لا تقتصر الأسماء على الإنجليزية؛ يمكن كتابة الاسم النصي بين علامتي تنصيص مفردتين أو مزدوجتين، وهو الأنسب للأسماء المركبة أو المحتوية على محارف خاصة. الأسماء غير المقتبسة يجب أن تطابق قواعد معرّفات CSS. تكتب أسماء العائلات العامة مثل serif وsans-serif دون تنصيص.

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

fonts with default family

بدون تحديد font-family، يستخدم النص العائلة الموروثة أو العائلة الافتراضية بحسب أنماط الصفحة والمتصفح.

HTML 
<h1>This is heading 1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
جرّب بنفسك

CSS font family with single quotes

يمكن كتابة القيمة مع خاصية font-family بعلامات تنصيص فردية.

HTML 
p
{
font-family:'tahoma';
}
جرّب بنفسك

CSS font family with dubble quotes

يمكن كتابة القيمة مع خاصية font-family بعلامات تنصيص مزدوجة.

HTML 
p
{
font-family:"tahoma";
}
جرّب بنفسك

CSS fonts with multi family

يفضل المتصفح العائلات حسب ترتيبها في font-family. إذا غاب الخط الأول أو لم يدعم حرفًا مطلوبًا، يبحث في البدائل. ينتهي المثال بعائلة عامة serif لتوفير بديل من النظام.

HTML 
p
{
font-family:"tahoma","arial","Times New Roman", serif;
}
جرّب بنفسك

CSS Generic Font Families أنواع الخطوط العامة في لغة CSS

من العائلات العامة التقليدية في CSS الأنواع الخمسة التالية؛ وتوجد عائلات عامة أخرى مثل system-ui:

  • Serif fonts يكون للحروف حواف بارزة صغيرة في أطرافة,تعطي للحروف الأنجليزية أناقة وجاذبية.
  • Sans-serif الخطوط تكون بدون حواف في أطرافة لتعطي مظهر أقرب للرسمية.
  • Monospace fonts جميع الحروف لها نفس العرض. تعطي نظرة ميكانيكية.
  • Cursive fonts الخطوط تشبه خط اليد البشرية.
  • Fantasy fonts الخطوط هي خطوط زخرفية مرحة.

CSS Generic Font Families

HTML 
.a
{
font-family: "Times New Roman", Times, serif;
}

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

.c
{
 font-family: "Lucida Console", "Courier New", monospace;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات17

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 17 مفهومةأول بطاقة، أول خطوة
01 Family عائلة
للمراجعة
02 Font الخط
للمراجعة
03 Font Family عائلة الخط
للمراجعة
04 Attribute سمة
للمراجعة
05 Serif رقيق
للمراجعة
06 Property خاصية
للمراجعة
07 Value قيمة
للمراجعة
08 Times New Roman نوع من أنواع الخطوط
للمراجعة
09 Arial نوع من أنواع الخطوط
للمراجعة
10 Georgia نوع من أنواع الخطوط
للمراجعة
11 Tahoma نوع من أنواع الخطوط
للمراجعة
12 Verdana نوع من أنواع الخطوط
للمراجعة
13 Helvetica نوع من أنواع الخطوط
للمراجعة
14 Trebuchet MS نوع من أنواع الخطوط
للمراجعة
15 Garamond نوع من أنواع الخطوط
للمراجعة
16 Courier New نوع من أنواع الخطوط
للمراجعة
17 Brush Script MT نوع من أنواع الخطوط
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات1

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 1 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

2أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي2 أسئلة تنتظرك
01

ماهي الخاصية التي تستخدم في تحديد نوع الخط الذي يظهر في الصفحة ؟

____
02

هل المتصفحات تتعرف بشكل تلقائي علي جميع انواع الخطوط ويمكنك استخدامها بشكل طبيعي ؟