http://upload.dzbatna.net/upfiles/2N436803.gif- الدرس مفصل 4: الخطوط
http://upload.dzbatna.net/upfiles/uRY02504.png
في هذا الدرس مفصل ستتعلم الخطوط وكيف تفعلها باستخدام
CSS ،
وسنقوم أيصاً بمعالجة مشكلة كيفية عرض بعض الخطوط التي لن تظهر بشكل صحيح ما لم تكن مثبتة على الحاسوب ،
سنتعلم هذه الخصائص في هذا الدرس مفصل:
http://upload.dzbatna.net/upfiles/5fW74184.gifنوع الخطوط •
font-family
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifطراز الخط •
font-
style
http://upload.dzbatna.net/upfiles/5fW74184.gifتباين الخط •
font-
variant
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifوزن الخط •
font-
weight
http://upload.dzbatna.net/upfiles/5fW74184.gifحجم الخط •
font-size
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifجمع كل خصائص الخط •
font
http://upload.dzbatna.net/upfiles/Owl01370.gif نوع الخطوط "font-family"
http://upload.dzbatna.net/upfiles/uRY02504.png
الخاصية
font-family
تستخدم لوضع قائمة خطوط تطبق على حسب الأولوية على عنصر أو صفحة م ،
إذا لم يجد المتصفح الخط الأول ضمن قائمة الخطوط سيقوم باستخدام الخط الثاني في القائمة وإذا لم يجده سيحاول عرض الخط التالي ،
وهكذا حتى يجد الخط المناسب.
هناك نوعان من أسماء الخطوط تستخدم لتصنيفه ،
خطوط بأسماء محددة أو أسماء عامة ،
المصطلحين سنشرح طريقةهما في الفقرات اللاحقة.
أسماء الخطوط
أمثلة لخطوط بأسماء محددة هي "
arial" و"
Times New Roman" أو "
Tahoma".
أسماء عامة
الأسماء العامة للخطوط تحدد المجموعة من الخطوط التي لها شكل متماث ،
فمثلاً
sans-serif هي مجموعة من الخطوط لا تحوي زوائد على الأحرف وهي خطوط مناسبة لعرض النص على الشاشة.
الاختلاف بين أنواع الخطوط يوضح في المثال التالي :
http://upload.dzbatna.net/upfiles/AgD34636.jpg
عندما تضع قائمة بالخطوط في موقعك فأنت تبدأ مع الخط المفضل لديك ثم الذي يليه ،
ومن الأفضل أن تنهي القائمة باسم مجموعة عامة من الخطوط ،
بهذه الطريقة تضمن أن الصفحة ستعرض بنفس النوع من الخط المفضل لديك إذا لم يجد المتصفح الخط الذي قمت بتحديده.
فمثلاً قائمة مرتبة من الخطوط مرتبة ستكون بهذا الشكل:
رمز Code:
h1 {
font-family:
arial,
verdana,
sans-serif;}
h2 {
font-family: "
Times New Roman", serif;}
العناوين التي حددت باستخدام العنصر <
h1> ستعرض باستخدام خط "
arial" ،
إذا لم يكن هذا الخط مثبتاً في حاسوب المستخدم سيعرض بدلاً منه خط "
verdana" وإذا لم يكن الإثنان موجودان على حاسوب المستخدم سيتم اختيار خط من عائلة الخطوط
sans-serif لعرض العناوين .
لاحظ كيف أننا وضعنا اسم خط "
Times New Roman" بين علامتي تنصيص لأن اسمه يحوي مسافات ولذلك يجب أن يوضع بين علامتي تنصيص.
http://upload.dzbatna.net/upfiles/Owl01370.gif طراز الخط "font-style"
http://upload.dzbatna.net/upfiles/uRY02504.png
الخاصية
font-
style تحدد ما إذا كان الخط سيحمل القيمة
normal أو italic أو oblique ،
في المثال أدناه كل عناوين <
h2> ستظهر بشكل مائل.
رمز Code:
h1 {
font-family:
arial,
verdana,
sans-serif;}
h2 {
font-family: "
Times New Roman", serif;
font-
style: italic;}
http://upload.dzbatna.net/upfiles/Owl01370.gif تباين الخط "font-variant"
http://upload.dzbatna.net/upfiles/uRY02504.png
الخاصية
font-
variant تستخدم للاختيار بين القيمتين
normal أو
small-caps للخط وهي متعلقة فقط باللغات الأوروبية ،
القيمة
small-caps تعني أن النص سيكتب بحروف كبيرة لكنها من ناحية الحجم صغيرة ،
يبدو الأمر مربكاً ،
عليك أن ت الآتي لكي تفهم أكثر :
http://upload.dzbatna.net/upfiles/UAu35456.jpg
إذا اختيرت القيمة
small-caps للخاصية
font-
variant ولم يكن هناك خط يدعم هذه الخاصية سيقوم المتصفح بعرض النص بحروف كبيرة فقط .
رمز Code:
h1 {
font-
variant:
small-caps;}
h2 {
font-
variant:
normal;}
http://upload.dzbatna.net/upfiles/Owl01370.gif وزن الخط "font-weight"
http://upload.dzbatna.net/upfiles/uRY02504.png
الخاصية
font-
weight تصف كم ستكون سماكة أو "ثقل" الخط ،
يمكن للخط أن يحمل القيمة
normal أو
bold ،
وهناك متصفحات تدعم استخدام الأرقام من
100 إلى
900 لوصف ثقل الخط .
رمز Code:
p {
font-family:
arial,
verdana,
sans-serif;} td {
font-family:
arial,
verdana,
sans-serif;
font-
weight:
bold;}
http://upload.dzbatna.net/upfiles/Owl01370.gif حجم الخط "font-size"
http://upload.dzbatna.net/upfiles/uRY02504.png
حجم الخط يمكن تحديده بالخاصية
font-size.
هناك العديد من الوحدات (مثال: بكسل ،
النسبة المؤية) التي يمكن استخدامها لوصف حجم الخط ،
في هذا المثال سنركز على الوحدات الأكثر استخداماً ،
والمثال يتضمن:
رمز Code:
h1 {
font-size: 30px;}
h2 {
font-size: 12pt;} h3 {
font-size: 120%;} p {
font-size: 1em;}
هناك فرق واحد بين وحدات القياس الأربع ،
وهي أن كل من '
px' و'
pt' تجعل حجم الخط محدداً بدقة وثابت بينما '
%' و '
em'
تسمح للمستخدم بتغيير حجم الخط إلى المستوى المناسب له ،
هناك العديد من المستخدمين من ذوي الاحتياجات الخاصة أو كبار السن أو من يعاني من ضعف في البصر أو يملك شاشة ذات جودة رديئة ،
ولكي نجعل الموقع قابلاً للوصول لهذه الفئات وللجميع لا بد من استخدام وحدات قياس يمكن تعديلها مثل '
%' أو '
em'.
في المثال أدناه توضيح لكيفية تعديل حجم الخط في موزيلا فايرفوكس وإكسبلورر ،
خاصية رائعة ،
ألا تظن ذلك؟
http://upload.dzbatna.net/upfiles/Xra34730.jpg
http://upload.dzbatna.net/upfiles/Owl01370.gif جمع كل خصائص الخط "font"
http://upload.dzbatna.net/upfiles/uRY02504.png
استخدام
font الخاصية التي يمكنها أن تختصر كل خصائص الخطوط في سطر واحد.
فمثلاً تصور هذه السطور الأربعة تصف خصائص خطوط للعنصر <
p>:
رمز Code:
p {
font-
style: italic;
font-
weight:
bold;
font-size: 30px;
font-family:
arial,
sans-serif; }
باستخدام الخاصية التي تختصر الخصائص الأخرى يمكن للسطور الأربعة أن تبسط بهذا الشكل:
رمز Code:
p {
font: italic
bold 30px
arial,
sans-serif; }
قائمة قيم الخاصية
font ترتب بهذا الشكل:
font-
style |
font-
variant |
font-
weight |
font-size |
font-family
ملخص
تعلمت في هذا الدرس مفصل بعض الإمكانيات المتعلقة بالخطوط ،
تذكر أن أحد أهم مميزات استخدام
CSS لتحديد الخطوط هو إمكانية تغيير الخط لكل صفحات الموقع خلال دقائق قليلة ،
CSS يمكنها أن توفر الوقت وتجعل حياتك أكثر سهولة
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/IrK49652.gif تهانينا !
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifلقد إنتهى الدرس مفصلhttp://www.losha.net/vb/images/smilies/vip/sm258.gif !
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifيتبع
http://upload.dzbatna.net/upfiles/rnI37149.gif- يستقبل الاستفسارات
الاخ الفاضل / ثامر الصعيدي
كل يوم من الساعة 7.30 مساء حتى الساعة 10 .
http://upload.dzbatna.net/upfiles/uRY02504.png http://upload.dzbatna.net/upfiles/5fW74184.gif
