تطبيق وصل wassll لمتابعة مخصصات المحروقات

الخطوط في CSS

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

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

مجموعات الخطوط العامة في CSS

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

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

 

خاصية font-family

إن 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

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

normal, italic, oblique

مثال 2

h1{
    font-style: oblique;
    }

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

 

خاصية font-variant

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

مثال 3

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

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

 

خاصية font-weight

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

مثال 4

h1{
    font-weight: bold;
    }

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

 

خاصية font-size

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

مثال 5

h1{
    font-size: 100px;
    }

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

 

خاصية font

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

مثال 6

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

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