[تمهيد] الدرس 4 : تعرف على الخطوط وانواعها وكيفية تركيبها واستدعائها

بسم الله الرحمن الرحيم

درسنا اليوم عن الخطوط  والخطوط هى شئ جميل يكمل تنسيق المدونة بجانب الـ css وافضل منتقى للخطوط هو من ينتقى الخط المبدع المفهوم الذى يدعم العربية والانجليزية ويكون مختلف عن الاخرين وكما ترى خطى يدعم العربية والانجليزية لاكنى اخترت خط انجليزى ليدعم اكثر اللغه الانجليزية حين اكتب بها

انواع الخطوط

اولا خطوط الكتابه

خطوط الكتابة تنقسم لقسمين خطوط عربية وانجليزية والعربية ايضا تنقسم لقسمين خطوط عربية لا تشكل الانجليزية وخطوط عربية تشكل الخطوط الانجليزية

اولا الخطوط العربية

1- ابرز تلك الخطوط العربية هو droid arabic kufi

صورة الخط

معلومات الخط

هذا الخط هو خط مبدع وهو الخط العربى الوحيد الموجود على جوجل فونت

كيفية استدعاء الخط للكتابه به

طريقه css

فوق </head>

نضع الكود التالى 

<style>

@import url(http://fonts.googleapis.com/css?family=Droid+Arabic+Kufi);

body {

font-family: 'Droid Arabic Naskh';

}

</style>

ونلاحظ هنا استخدام وسم body لتعميم الخط على الموقع كاملا واستخدمنا @import url لنستورد ملف css من موقع خارجى لن نتكلم فى هذى الموضوع لانة يخص css

ويوجد الكثير من الخطوط العربية الاخرى سنتكلم عنها فى درس لاحق باذن الله

ثانيا الخطوط الانجليزية

2-ابرز الخطوط الانجليزية فى نظرى هو خط Helvetica Neue

معلومات الخط هذا الخط هو الخط الذى نستخدمة فى مدونتنا وهو خط رائع وبسيط

كيفية استدعاء الخط للكتابه به

طريقه css

فوق </head>

نضع الكود التالى 

<style>

@import url(http://fonts.googleapis.com/css?family=Armata|Helvetica+Neue);

body {

font-family: 'Helvetica Neue';

}

</style>

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

<style>
@import url(http://fonts.googleapis.com/css?family=Droid+Arabic+Kufi);@import url(http://fonts.googleapis.com/css?family=Armata|Helvetica+Neue);

body {
font-family: 'Droid Arabic Naskh',Helvetica Neue;
}
</style>

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

شارك شارك شارك