1. إستبعاد الملاحظة

درس دورة تعلم لغة CSS | خواص الخطوط (9)

الموضوع في 'منتدى الدورات العامة' بواسطة Ibrahem Smart, بتاريخ ‏يوليو 19, 2018.

  1. Ibrahem Smart

    Ibrahem Smart زيزوومى فضى

    إنضم إلينا في:
    ‏يناير 30, 2017
    المشاركات:
    1,829
    الإعجابات :
    1,008
    نقاط الجائزة:
    860
    الجنس:
    ذكر
    الإقامة:
    الاسكندرية
    برامج الحماية:
    ESET
    نظام التشغيل:
    Windows 7


    [​IMG]

    مرحبا إخوتي أعضاء منتديات زيزووم للأمن والحماية
    اليوم سأشرح لكم في دورة تعلم لغة
    CSS

    Fonts
    خواص الخطوط

    ------------------------------------------------------------

    خواص الخطوط مختلفة تمامًا عن النصوص فخواص الخطوط تتحكم بالخط الذي يكتب به النص وخواص النصوص تتحكم بشكل النص نفسه.
    وقد تم عمل بعض التحديثات على خواص الخطوط في الاصدار الثالث من اللغة
    CSS3 لكن الدورة مخصصة للإصدار الأول والثاني من اللغة فقط.
    كل خاصية من خواص الخطوط تكتب
    (font-000: ...:wink: مكان الاصفار تكتب الخاصية ومكان النقط تكتب قيمتها.

    ------------------------------------------------------------

    font-family

    هذه الخاصية تمكنك من اختيار خط النص فعند كتابة نص يظهر بالخط الافتراضي لمتصفحك لكن يمكنك تحديد خط معين يظهر هذا النص به عن طريق هذه الخاصية ولكنها لا تدعم جميع الخطوط فإذا كنت تريد جعلها تدعم أي خط غير مدعوم مسبقًا ستتعلم ذلك في CSS3 طريقة استخدام (fontface).

    فهنا قمت بعمل ديف وفيه نص عربي فظهر بالخط الافتراضي لمتصفحي
    (جوجل كروم)

    1.png

    2.png

    فأعطيته الخاصية في
    CSS بخط تاحوما

    3.png

    فتحول الخط الى الخط الذي اخترته

    2018-07-11_10-55-19.png

    لكن هناك أمرين يجب أن ننتبه لهما في استعمال هذه الخاصية

    الأول: عند كتابة خط مكون من أكثر من كلمة يجب أن نضعه بين " " أو ' ' حتى يستطيع المتصفح أن يتعرف عليه جيدًا.

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

    إذا خاصية
    font-family تستخدم لتحديد خط النص ولكن بعض الخطوط قد لا تكون مدعومه ويمكنك حل المشكلة عند تعلمك لـ CSS3.

    ------------------------------------------------------------

    font-size

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

    فإذا أعطيت النص هذه الخاصية بحجم مثلًا
    30 بيكسل

    8.png

    فسيكبر حجمه

    وبمناسبة الأحجام فسوف أقوم بعمل موضوع خارج الدورة يشرح وحدات القياس في البرمجة

    إذا خاصية
    font-size تتحكم بحجم الخط بوحدات القياس التي سأشرحها قريبًا

    ------------------------------------------------------------

    font-style / font-weight

    كلا الخاصيتين تقومان بتعديل شكل الخط فخاصية font-style تجعل النص مائلًا و font-weight تتحكم بضخومة الخط.

    وتأخذ خاصية
    font-style قيمتي ( italic & oblique ) وكلاهما تجعلان النص مائلًا

    أما
    font-weight فتأخذ قيمتي ( lighter & bold ) أو أرقام

    ( 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900 )
    كلما زاد العدد زادت الضخومة وكلما قل العدد قلت الضخومة

    ------------------------------------------------------------

    [​IMG]
     
  2. اليوناني

    اليوناني مصمم زيزوومي مميز فريق الدعم لقسم الحماية نجم الشهر عضو المكتبة الإلكترونية نجم المنتدى فريق الدعم لتطبيقات الجوالات

    إنضم إلينا في:
    ‏نوفمبر 13, 2014
    المشاركات:
    16,230
    الإعجابات :
    24,315
    نقاط الجائزة:
    5,185
    الجنس:
    ذكر
    برامج الحماية:
    Kaspersky
    نظام التشغيل:
    Windows 10
    دروس مميزة

    بارك الله فيك
     
    أعجب بهذه المشاركة Ibrahem Smart
  3. ضياء الدين مصطفي

    ضياء الدين مصطفي زيزوومي VIP

    إنضم إلينا في:
    ‏ابريل 9, 2015
    المشاركات:
    4,884
    الإعجابات :
    3,251
    نقاط الجائزة:
    1,886
    الجنس:
    ذكر
    الإقامة:
    Cairo, Egypt
    برامج الحماية:
    avast
    نظام التشغيل:
    Windows 10
    جزاك الله خيرا جعل الله جهودك ونشرك الطيب في ميزان حسناتك
     
    أعجب بهذه المشاركة Ibrahem Smart
  4. Fadi344

    Fadi344 زيزوومي VIP الأعضاء النشطين لهذا الشهر

    إنضم إلينا في:
    ‏أغسطس 16, 2013
    المشاركات:
    2,379
    الإعجابات :
    2,480
    نقاط الجائزة:
    1,600
    الجنس:
    ذكر
    برامج الحماية:
    Kaspersky
    نظام التشغيل:
    Windows 7
    بارك الله بكم أخي الكريم...
    شكراً جزيلاً لكم ...
     
    أعجب بهذه المشاركة Ibrahem Smart

مشاركة هذه الصفحة

جاري تحميل الصفحة...