الخميس، 24 سبتمبر 2015
أولاً نهنؤكم إخواننا بعيد الأضحى المبارك نسأل الله أن يعيده علينا بالخير و اليمن و البركات و أن يرفع عن أمتنا العربية والإسلامية النكبات و الكربات ..... آمــــين.
ندخل في الموضوع مباشرة :
لا شك أن الخطوط العربية الجميلة تضفى على المدونات العربية نوعاً من الجمال ترتاح له العين عندما تطالع تلك المدونات. الخطوط كثيرة و عديدة و هي أذواق طبعاً و الأذواق تختلف و تتباين حسب كل شخص و لكن هناك خطوط يتفق عليها الجميع تقريباً في جمالها وعندما تراها لا تمل من القراءة.
ندخل في الموضوع مباشرة :
لا شك أن الخطوط العربية الجميلة تضفى على المدونات العربية نوعاً من الجمال ترتاح له العين عندما تطالع تلك المدونات. الخطوط كثيرة و عديدة و هي أذواق طبعاً و الأذواق تختلف و تتباين حسب كل شخص و لكن هناك خطوط يتفق عليها الجميع تقريباً في جمالها وعندما تراها لا تمل من القراءة.
و سنحاول بإذن الله في درسنا اليوم شرح طريقة تركيب و تنسيق بعضاً من الخطوط العربية المشهورة و الجميلة و ذلك لتحسين مظهر مدونتك.
*** لكل خط من
الخطوط كود و وسم و لكلٍ منهما وظيفته ومكانه الذي يوضع به.
* و بالنسبة
لوسم الخط فإنه يقوم باستدعاء ملفات الخط لاستخدامه في المكان الذي وُضع فيه
الوسم.
يعني لو تم
وضع وسم خط معين في ستايل تنسيق " المشاركات الشائعة " مثلاً٬ فإنه يتم
استدعاء ملفات هذا الخط لتصبح إضافة " المشاركات الشائعة " بهذا الخط و
هكذا الحال في تنسيق كل مكونات المدونة.
و يوضع وسم
الخط في ستايلات تنسيقات القالب - كما ذكرنا.
و يأخذ وسم الخط الشكل الآتي :
font-family: 'اسم الخط';
لكن هناك حالتان بالنسبة لوسم الخط :
الحالة الأولى : في حالة تخصيص خط لكامل أجزاء المدونة :
في تلك الحالة يتم وضع وسم الخط في التنسيق العام للمدونة كما يلي :
·
قم بالبحث
عن الوسم التالي بقالب مدونتك : " body " و هو في الغالب
موجود في بدايات القالب.
·
ستجد له
قوسي بداية و نهاية مثل هذا الكود :
body{background:#fff;width:100%;margin:0;text-align:right;font-size: 13px;color:#000000;line-height:1.6em}
·
قم بوضع
وسم الخط الذي تريد داخل الكود السابق بين القوسين في أي سطر كهذا الموجود داخل
الكود و الملون بالأصفر.
body{background:#fff;width:100%;margin:0;text-align:right;font-family: 'Droid Arabic Kufi';font-size: 13px;color:#000000;line-height:1.6em}
*** إذا كان هناك وسم لخط موجود٬
قم بحذفه قبل إضافة الوسم الذي تريد حتى لا يحدث تداخل.
الحالة الثانية : تخصيص خط لجزء أو شئ معين داخل المدونة دون باقي أجزاء المدونة :
في تلك
الحالة يتم وضع وسم الخط داخل تنسيق ستايل الـ Css للإضافة أو الجزء الذي
تريد تغيير خط الكتابة به بنفس الطريقة السابقة داخل قوسي الستايل.
و يتم
تنسيق الخطوط ببعض الأكواد كما يلي :
font-family: 'Times New Roman', Times, serif;font-size: 10px;font-style: normal;font-style: italic;color: #000000;font-weight: bold;line-height:1.2em;
حيث أن :
1-
'Times New Roman', Times, serif : عبارة عن نوع الخط.
2-
10px : عبارة عن حجم الخط.
3-
Italic : عبارة عن شكل الخط و هو
مائل في هذه الحالة. و لجعله طبيعياً يمكنك استبدال " Italic " بـ " Normal
".
4-
#000000 : عبارة عن لون الخط.
5-
Bold : و تعني أن الخط عريض.
6-
1.2em : عبارة عن ارتفاع الخط.
و سنعرض
لكم الآن بإذن الله أشكال بعض الخطوط و أكوادها و وسومها لتختار منها ما تريد و
تقوم بتركيبها كما شرحنا بالأعلى.
1- خط " Thabit
" :
·
وسم الخط :
font-family: 'Thabit';
·
كود الخط :
<link href='http://fonts.googleapis.com/earlyaccess/thabit.css' rel='stylesheet' type='text/css'/>
2- خط " Droid Arabic Naskh " :
·
وسم الخط :
font-family: 'Droid Arabic Naskh';
·
كود الخط :
<link href='http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css' rel='stylesheet' type='text/css'/>
3- خط " Amiri
" :
·
وسم الخط :
font-family: 'Amiri';
·
كود الخط :
<link href='http://fonts.googleapis.com/earlyaccess/amiri.css' rel='stylesheet' type='text/css'/>
4- خط " Droid Arabic Kufi " :
·
وسم الخط :
font-family: 'Droid Arabic Kufi';
·
كود الخط :
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
5- خط " Noto Nastaliq Urdu Draft " :
·
وسم الخط :
font-family: 'Noto Nastaliq Urdu Draft';
·
كود الخط :
<link href='http://fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css' rel='stylesheet' type='text/css'/>
6- خط " Scheherazade " :
·
وسم الخط :
font-family: 'Scheherazade';
·
كود الخط :
<link href='http://fonts.googleapis.com/earlyaccess/scheherazade.css' rel='stylesheet' type='text/css'/>
7- خط " Lateef
" :
·
وسم الخط :
font-family: 'Lateef';
·
كود الخط :
<link href='http://fonts.googleapis.com/earlyaccess/lateef.css' rel='stylesheet' type='text/css'/>
هيا اختر من الخطوط ما شئت و قم بتركيبها حسب ما شرحنا بالأعلى و لكن لا تبالغ في تركيب الخطوط بأن تقوم بتثبيتها كلها على مدونتك لأن ذلك قد يتسبب في بطئها في التحميل.
وإذا واجهتك صعوبات في التركيب أو التنسيق فلا تتردد في السؤال عبر التعليقات.
تم بحمد الله وحده
كل عام أنتم بخير
و انتظرونا في التدوينة القادمة بإذن الله تعالى
الاشتراك في:
تعليقات الرسالة (Atom)
اشترك في خدمة البريد ليصلك جديدنا
إرسال تعليق
كم يسعدنا تفاعلكم معنا بتعليقاتكم الهادفة٬ فهي تساعد على إثراء الحوار بالمزيد من الإفادة للجميع و أنا أولكم. لكن يرجى من الجميع مراعاة الآداب العامة و القيم الإسلامية و عدم نشر روابط للإشهار حتى يتم نشر التعليق. كما يمكنكم استخدام ركن الاستفسارات للسؤال عن شئ خارج الموضوع كما يمكنك إضافة كود داخل التعليق بعد تحويله بـمحول الأكواد .