الخطوط في لغة CSS 3

الخطوط في لغة CSS

تنسيق الخطوط بإستخدام CSS, سوف نقوم بمعالجة مشكلة كيفية عرض بعض الخطوط التي لن تظهر بشكل صحيح ما لم تكن مثبتة على الحاسوب. إن إختيار الخط الصحيح في موقعك له تأثير كبير جداً على كيفية تجربة القراء لموقع الويب, و يمكن للخط الصحيح المنسق من إنشاء هوية قوية لعلامتك التجارية, و من المهم إستخدام خط يَسَهل قراءته, و يجب الأخذ بعين الإعتبار أن الخط يضيف قيمة إلى النص الخاص بك و من المهم أيضاً إختيار اللون الصحيح للخط و حجم النص للخط.

تستخدم الخطوط في لغة CSS لتحديد نوع الخط وحجمه ولونه ونمطه وغير ذلك من الخصائص المتعلقة بالنص. يمكن استخدام خاصية font-family لتحديد نوع الخط المستخدم، وخاصية font-size لتحديد حجم الخط، وخاصية color لتحديد لون الخط، وخاصية font-style لتحديد نمط الخط (مثل الخط العريض أو المائل) وغيرها من الخصائص المتعلقة بالنص.

ويمكن استخدام الخطوط المدمجة في النظام (مثل Arial و Times New Roman) أو الخطوط المستوردة من خوادم الخطوط الخارجية. ويمكن تحديد ترتيب الخطوط المستخدمة في حالة عدم توفر الخط المحدد في النظام أو عدم تمكن المتصفح من تحميل الخط المستورد.

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

تُمكنك css بالتحكم بالخطوط من حيث الحجم و اللون و نوع الخط بإستخدام بعض الخصائص العامة و هي خمس خصائص و هي:

1. font-family.
2. font-style.
3. font-variant.
4. font-weight.
5. font-size.
6. font.

فيما يلي مثال يوضح كيفية تحديد خصائص الخط في CSS:

/* تحديد نوع الخط */
body {
  font-family: Arial, sans-serif;
}

/* تحديد حجم الخط */
h1 {
  font-size: 36px;
}

/* تحديد لون الخط */
p {
  color: #333;
}

/* تحديد نمط الخط */
em {
  font-style: italic;
}

في هذا المثال، تم تحديد نوع الخط على أنه Arial أو أي خط سانس سيريف، وتم تحديد حجم العنوان الأول (h1) على أنه 36 بكسل، وتم تحديد لون الفقرة (p) على أنه #333 (أي الرمز اللوني للرمادي)، وتم تحديد نمط الخط للنص المشدد (em) على أنه مائل.

خاصية font-family css الخطوط في لغة CSS

إن font-family تمكنك بوضع قائمة من الخطوط تُطبِّق على حسب الأولوية على عنصر ما, بمعنى إن لم يجد المتصفح الخط الأول سوف ينتقل إلى الخط الثاني و هكذا لحين يجد الخط المناسب. و توجد أنواع خطوط مثل ( tahome, times new roman, Arial ) و هناك العديد من الخطوط في كل عائلة, دعونا نتحدث عن تلك العائلة و ما الفرق بينهم.

times new roman,garamond,georgia
.

تنتمي هذه الخطوط إلى عائلة serif كما تتميز تلك الخطوط بأنها تحتوي على زوائد في أطراف حروفها.

arial,rtebuchet,verdana
.

هذه الخطوط لا تحتوي على زوائد على أطرافها عكس الخطوط من عائلة serif و كما إن تلك الخطوط من عائلة sans-serif.

courier,courier new,andele mono
.

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

مثال 1

ليكن لدينا إسم موقعنا في جسم الصفحة body و هما الوسم h1 و h2.

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

في المثال السابق في العملية الأولى التي هي h1 نقول للمتصفح إن لم تجد نوع الخط الأول الذي هو verdana أذهب الى الخط الثاني الذي هو arial و إن لم تجد الخط إستعمل خط من عائلة sans-serif و في العملية الثانية التي هي h2 نقول للمتصفح إن لم تجد نوع الخط الأول الذي هو Times New Roman إستعمل أحد خطوط عائلة serif.

خاصية font-style css الخطوط في لغة CSS

خاصية font-style هذه الخاصية تستخدم في تنسيق الخط و تأخذ القيم.

normal, italic, oblique
.

مثال

h1{
    font-style: oblique;
    }

قمنا بإستخدام الخاصية font-style و وضعنا له القيمة oblique.

خاصية font-variant الخطوط في لغة CSS

الخاصية font-variant متعلقة في تبيين الخط و تأخذ القيم (normal, small, caps) و هي متعلقة في اللغات الأوربية, القيمة small-caps تعني بأن النص سوف يكتب بحروف كبيرة لكنها من ناحية الحجم صغير و هذا الأمر ليس صعباً.

مثال

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

إستخدمنا الخاصية font-variant على الوسم الأول h1 و أعطيناه القيمة small-caps ثم على الوسم h2 إستخدمنا القيمة normal.

خاصية font-weight الخطوط في لغة CSS

الخاصية font-weight تسمى بوزن الخط و هناك بعض القيم التي تستخدم مع هذه الخاصية و هي (bold, normal). و هناك متصفحات تدعم إستخدام الأرقام من 100 إلى 900.

مثال

h1{
    font-weight: bold;
    }

قمنا بإستخدام الخاصية font-weight و القيمة التي وضعناها للخط هي bold.

خاصية font-size css الخطوط في لغة CSS

الخاصية font-size تتحكم بحجم الخط كما يمكن تحديد الخط بالنسبة المئوية أو البيكسل.

h1{
    font-size: 100px;
    }

قمنا في هذا المثال بإستخدام الخاصية font-size و أعطيناها القيمة 100 بيكسل.

خاصية font css الخطوط في لغة CSS

الخاصية font هي إختصار لكل الخصائص السابقة فيمكنك من خلال تلك الخاصية تجميع الخصائص السابقة في سطر واحد كما تحدثنا في الدرس السابق عن background يمكنك إختصار العديد من سطور التنسيق في سطر واحد.

مثال

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

قمنا في هذا المثال بإستخدام الخاصية font و أعطيناها تنسيق الخط انه مائل italic و أن الخط يكون عريض و حجم هذا الخط 30 بيكسل و نوع الخط هو arial و في حال لم تجد هذا الخط قم بإستعمال sans-serif.