البحث داخل الموقع..

شرح إضافة خطوط جديدة لمدونة بلوجر/موقعك

السلام عليكم ورحمة الله

شرح إضافة خطوط جديدة لمدونة بلوجر/موقعك


بما أن "المحتوى هو الملك" يتوجب عليك الإهتمام بكيفية ظهور النص لدى الزوار
غالبا المبرمجين لا يهتمون بهذا الجزئية، لكن الآن أصبح هناك العديد من الخطوط الجديدة التي بإمكانك تضمينها بموقعك بكل سهولة.. بحيث يصبح أفضل وأسهل من ناحية القراءة ..

وبالتأكيد الخطوط الجديدة ستضفي لمسة مميزة لموقعك :)

شرح إضافة خطوط جديدة لمدونة بلوجر/موقعك - دروس4يو Dros4U

أشهر الخطوط العربية المستخدمة في المواقع :

GESSTwo
GESSTwoLight
Droid Arabic Kufi
GESSTwoMediumRegular
DroidKufi-Bold


من الأمور التي يجب مراعاتها عند إختيار خط جديد للموقع : 

1- سرعة تحميل الخط
2- ثبات السيرفر المستضيف للخط
3- توافق الخط مع جميع الاجهزة
4- خيارات التحكم بالخط

هذه من أهم الخصائص التي يجب علينا مراعاتها عند القيام باختيار خط جديد للموقع.



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

الطريقة الأولى:

من خلال تضمين كود css في ملف الستايلات الخاص بالموقع
بإستخدام الأمر import كالتالي:

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
ثم إعطاء الخاصية لخطوط الموقع:

font-family: 'Droid Arabic Kufi', serif;


الطريقة الثانية:

من خلال تضمين هذا الكود داخل كود القالب (مستخدمة بكثرة في مدونات البلوجر لذلك سنقوم بشرحها)

خطوات شرح الطريقة الثانية بالتفصيل: 

1- من  لوحة التحكم انتقل لـ القالب ثم تحرير html
2- كالعادة قم بأخذ نسخه احتياطيه لـ قالب المدونه قبل إجراء التغييرات
3- قم الآن بالبحث عن الكود التالي (استخدم ctrl+F)
<head> ثم أضف بعده مباشرة كود الخط التالي:



<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'>
4- الآن قم بتغيير نوع الخط في المدونة، وذلك من خلال البحث عن font-family
بإستخدام ctrl+F ثم غير القيمة لاسم الخط الذي اخترته ليصبح الشكل كالتالي:
font-family: 'Droid Arabic Kufi', sans-serif;
ملاحظة : ستجد هناك العديد من font-family مكررة في الكود، ليس شرط تغيرها كلها وإنما قم بتغيير ما تريده أن يظهر بالخط الجديد الذي أضفته.

5- حفظ النموذج.


مواقع بإمكانك الرجوع إليها للحصول على خطوط:
Fonts Google


اقرأ أيضا:

إليك أهم المواقع التي تفيد المصممين في عملهم


إرسال تعليق

0 تعليقات
* Please Don't Spam Here. All the Comments are Reviewed by Admin.