منتدى الحاسب والجوال العربي
منتدى الحاسب والجوال العربي
كلمة الإدارة  

اهلاً وسهلاً، بك يا " ‏زائر "

نعتزر عن المشكلات التي حدثت في الفترة الفائتة كنا نجري إعادة تكويد وإزالة الصور التالفة والأكواد الزائدة لتقديم أفضل تجربة تصفح لك

أهلا وسهلا بك زائرنا الكريم, أنت لم تقم بتسجيل الدخول بعد! يشرفنا أن تقوم بالدخول أو التسجيل إذا رغبت بالمشاركة في المنتدى

hozaifa01

الدرس 4 في لغة CSS التحكم بالخطوط

حذيفة احمد

حذيفة احمد

المدير العام
المدير العام
الدرس 4 في لغة CSS التحكم بالخطوط Emptyالبلد البلد : الدرس 4 في لغة CSS التحكم بالخطوط Sd10
الجنس : ذكر
عدد المساهمات : 1501
نقاط : 4362
مخالفات مخالفات : ليس لديه مخالفات
الدرس 4 في لغة CSS التحكم بالخطوط

الدرس 4: الخطوط
في هذا الدرس ستتعلم الخطوط وكيف تفعلها باستخدام CSS، وسنقوم أيصاً بمعالجة مشكلة كيفية عرض بعض الخطوط التي لن تظهر بشكل صحيح ما لم تكن مثبتة على الحاسوب، سنتعلم هذه الخصائص في هذا الدرس:

نوع الخطوط "font-family"

الخاصية
الكود:
font-family
تستخدم لوضع قائمة خطوط تطبق على حسب الأولوية على عنصر أو صفحة ما، إذا لم يجد المتصفح الخط الأول ضمن قائمة الخطوط سيقوم باستخدام الخط الثاني في القائمة وإذا لم يجده سيحاول عرض الخط التالي، وهكذا حتى يجد الخط المناسب.
هناك نوعان من أسماء الخطوط تستخدم لتصنيفها، خطوط بأسماء محددة أو أسماء عامة، المصطلحين سنشرحهما في الفقرات اللاحقة.
أسماء الخطوطأمثلة لخطوط بأسماء محددة هي "Arial" و"Times New Roman" أو "Tahoma".أسماء عامةالأسماء العامة للخطوط تحدد المجموعة من الخطوط التي لها شكل متماث، فمثلاً sans-serif هي مجموعة من الخطوط لا تحوي زوائد على الأحرف وهي خطوط مناسبة لعرض النص على الشاشة.
الاختلاف بين أنواع الخطوط يوضح في المثال التالي:
الدرس 4 في لغة CSS التحكم بالخطوط Figure005.ar
عندما تضع قائمة بالخطوط في موقعك فأنت تبدأ مع الخط المفضل لديك ثم الذي يليه، ومن الأفضل أن تنهي القائمة باسم مجموعة عامة من الخطوط، بهذه الطريقة تضمن أن الصفحة ستعرض بنفس النوع من الخط المفضل لديك إذا لم يجد المتصفح الخط الذي قمت بتحديده.
فمثلاً قائمة مرتبة من الخطوط مرتبة ستكون بهذا الشكل:

الكود:

   h1 {font-family: arial, verdana, sans-serif;}
   h2 {font-family: "Times New Roman", serif;}
   



العناوين التي حددت باستخدام العنصر
الكود:
<h1>
ستعرض باستخدام خط "Arial"، إذا لم يكن هذا الخط مثبتاً في حاسوب المستخدم سيعرض بدلاً منه خط "Verdana" وإذا لم يكن الإثنان موجودان على حاسوب المستخدم سيتم اختيار خط من عائلة الخطوط sans-serif لعرض العناوين.
لاحظ كيف أننا وضعنا اسم خط "Times New Roman" بين علامتي تنصيص لأن اسمه يحوي مسافات ولذلك يجب أن يوضع بين علامتي تنصيص.

طراز الخط "font-style"

الخاصية
الكود:
font-style
تحدد ما إذا كان الخط سيحمل القيمة normal أو italic أو oblique، في المثال أدناه كل عناوين
الكود:
<h2>
ستظهر بشكل مائل.

الكود:

   h1 {font-family: arial, verdana, sans-serif;}
   h2 {font-family: "Times New Roman", serif; font-style: italic;}
   



تباين الخط "font-variant"

الخاصية
الكود:
font-variant
تستخدم للاختيار بين القيمتين normal أو small-caps للخط وهي متعلقة فقط باللغات الأوروبية، القيمة small-caps تعني أن النص سيكتب بحروف كبيرة لكنها من ناحية الحجم صغيرة، ، يبدو الأمر مربكاً، عليك أن تشاهد المثال الآتي لكي تفهم أكثر:
الدرس 4 في لغة CSS التحكم بالخطوط Figure006
إذا اختيرت القيمة
الكود:
small-caps
للخاصية font-variant ولم يكن هناك خط يدعم هذه الخاصية سيقوم المتصفح بعرض النص بحروف كبيرة فقط.

الكود:

   h1 {font-variant: small-caps;}
   h2 {font-variant: normal;}
   



وزن الخط "font-weight"

الخاصية
الكود:
font-weight
تصف كم ستكون سماكة أو "ثقل" الخط، يمكن للخط أن يحمل القيمة normal أو bold، وهناك متصفحات تدعم استخدام الأرقام من 100 إلى 900 لوصف ثقل الخط.

الكود:

   p {font-family: arial, verdana, sans-serif;}
   td {font-family: arial, verdana, sans-serif; font-weight: bold;}
   



حجم الخط "font-size"

حجم الخط يمكن تحديده بالخاصية
الكود:
font-size
.
هناك العديد من الوحدات (مثال: بكسل، النسبة المؤية) التي يمكن استخدامها لوصف حجم الخط، في هذا المثال سنركز على الوحدات الأكثر استخداماً، والمثال يتضمن:

الكود:

   h1 {font-size: 30px;}
   h2 {font-size: 12pt;}
   h3 {font-size: 120%;}
   p {font-size: 1em;}
   



هناك فرق واحد بين وحدات القياس الأربع، وهي أن كل من 'px' و'pt' تجعل حجم الخط محدداً بدقة وثابت بينما '%' و'em' تسمح للمستخدم بتغيير حجم الخط إلى المستوى المناسب له، هناك العديد من المستخدمين من ذوي الاحتياجات الخاصة أو كبار السن أو من يعاني من ضعف في البصر أو يملك شاشة ذات جودة رديئة، ولكي نجعل الموقع قابلاً للوصول لهذه الفئات وللجميع لا بد من استخدام وحدات قياس يمكن تعديلها مثل '%' أو 'em'.
في المثال أدناه توضيح لكيفية تعديل حجم الخط في موزيلا فايرفوكس وإكسبلورر، خاصية رائعة، ألا تظن ذلك؟
الدرس 4 في لغة CSS التحكم بالخطوط Figure007

جمع كل خصائص الخط "font"

استخدام
الكود:
font
الخاصية التي يمكنها أن تختصر كل خصائص الخطوط في سطر واحد.
فمثلاً تصور هذه السطور الأربعة تصف خصائص خطوط للعنصر
الكود:
<p>
:

الكود:

   p {
      font-style: italic;
      font-weight: bold;
      font-size: 30px;
      font-family: arial, sans-serif;
   }
   


باستخدام الخاصية التي تختصر الخصائص الأخرى يمكن للسطور الأربعة أن تبسط بهذا الشكل:

الكود:

   p {
      font: italic bold 30px arial, sans-serif;
   }
   


قائمة قيم الخاصية
الكود:
font
ترتب بهذا الشكل:
الكود:
font-style
|
الكود:
font-variant
|
الكود:
font-weight
|
الكود:
font-size
|
الكود:
font-family

#1 - كتب 11/1/2016, 10:48
https://h-mob.yoo7.com/ https://www.facebook.com/hozaifa01 https://twitter.com/hozaifa01

صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى

IP



جميع الحقوق محفوظة لـ © منتدى الحاسب والجوال العربي