الدرس 4: الخطوط
في هذا الدرس ستتعلم الخطوط وكيف تفعلها باستخدام CSS، وسنقوم أيصاً بمعالجة مشكلة كيفية عرض بعض الخطوط التي لن تظهر بشكل صحيح ما لم تكن مثبتة على الحاسوب، سنتعلم هذه الخصائص في هذا الدرس:نوع الخطوط "font-family"
الخاصيةfont-family تستخدم لوضع قائمة خطوط تطبق على حسب
الأولوية على عنصر أو صفحة ما، إذا لم يجد المتصفح الخط الأول ضمن قائمة
الخطوط سيقوم باستخدام الخط الثاني في القائمة وإذا لم يجده سيحاول عرض
الخط التالي، وهكذا حتى يجد الخط المناسب.هناك نوعان من أسماء الخطوط تستخدم لتصنيفها، خطوط بأسماء محددة أو أسماء عامة، المصطلحين سنشرحهما في الفقرات اللاحقة.
- أسماء الخطوط
- أمثلة لخطوط بأسماء محددة هي "Arial" و"Times New Roman" أو "Tahoma".
- أسماء عامة
- الأسماء العامة للخطوط تحدد المجموعة من الخطوط التي لها شكل متماث، فمثلاً sans-serif هي مجموعة من الخطوط لا تحوي زوائد على الأحرف وهي خطوط مناسبة لعرض النص على الشاشة.
عندما تضع قائمة بالخطوط في موقعك فأنت تبدأ مع الخط المفضل لديك ثم الذي يليه، ومن الأفضل أن تنهي القائمة باسم مجموعة عامة من الخطوط، بهذه الطريقة تضمن أن الصفحة ستعرض بنفس النوع من الخط المفضل لديك إذا لم يجد المتصفح الخط الذي قمت بتحديده.
فمثلاً قائمة مرتبة من الخطوط مرتبة ستكون بهذا الشكل:
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 تعني أن النص سيكتب بحروف كبيرة لكنها من ناحية الحجم صغيرة، ، يبدو الأمر مربكاً، عليك أن تشاهد المثال الآتي لكي تفهم أكثر: 
إذا اختيرت القيمة
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;}
في المثال أدناه توضيح لكيفية تعديل حجم الخط في موزيلا فايرفوكس وإكسبلورر، خاصية رائعة، ألا تظن ذلك؟
جمع كل خصائص الخط "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
ليست هناك تعليقات:
إرسال تعليق