أحدث الخطوط العربية في الويب لمدونات بلوجر
السلام عليكم ورحمة الله وبركاته ..
أهلا بكم أعضاء وزوار مدونة ابداع هاوس
هذا هو الدرس الثاني من دورة تطوير المواقع [تابع الدرس الأول : كيفية تعريب قالب بلوجر]
من خلال هذا الموضوع سوف تتمكن من اضافة أروع وأحدث الخطوط في الويب لمدونات بلوجر.
[عدد الخطوط : سبعة]
طريقة التركيب :
أولا توجه الى لوحة التحكم >> قالب >> تحرير Html
ثم نبحث عن الوسم ]]></b:skin>
ونضيف قبله مباشرة كود css لخطوط المراد إضافتها للمدونة
الخط الأول : ge_dinar
@font-face {
font-family: "ge_dinar";
src: url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/ge_dinar.eot');
src: local("☺"), url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/ge_dinar.eot?#iefix') format('embedded-opentype'), url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/ge_dinar.otf') format('opentype');
font-weight: normal;
}
الخط الثاني : ges
@font-face {
font-family: 'ges';
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot');
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot?') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.ttf') format('truetype');
}
@font-face {
font-family: 'GE SS Unique';
src: url('http://www.fontsaddict.com/fontface/ge-ss-unique-light.otf');
}
الخط الرابع : DroidKufi-Bold
@font-face {
font-family: "DroidKufi-Bold";
font-style: normal;
font-weight: 700;
src: url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot?#iefix") format("embedded-opentype"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff2") format("x-woff2"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff") format("woff"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.ttf") format("truetype");
}
الخط الخامس : DroidKufi-regular
@font-face {
font-family: "DroidKufi-regular";
font-style: normal;
font-weight: 400;
src: url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot?#iefix") format("embedded-opentype"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff2") format("x-woff2"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff") format("woff"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.ttf") format("truetype");
}
الخط السادس : Kaushan Script
@font-face{ font-family:'Kaushan Script'; font-style:normal; font-weight:400; src:local('Kaushan Script'),local('KaushanScript-Regular'),url(http://themes.googleusercontent.com/static/fonts/kaushanscript/v1/qx1LSqts-NtiKcLw4N03IFhlQWQpSCpzb2Peu3I-Q34.woff) format('woff')
}
الخط السابع : hacen_liner
@font-face {
font-family: "hacen_liner";
src: url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/hacen_liner.eot');
src: local("☺"), url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/hacen_liner.eot?#iefix') format('embedded-opentype'), url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/hacen_liner.woff');
font-weight: normal;
}
بعدج إدراجك للأكواد السابقة ... عندما تريد اضافة /تغيير خط معين فى أي جزء في القالب (القائمة مثلا)
ستجد الكود على هذا الشكل font-family:arial , tohama
اضف اسم الخط بعد font-family: مباشرة ..
لتكون في النهاية بهذا الشكل font-family: font-name arial , tohama
طبعا استبدل font-name باسم الخط .
أما إذا أردت تعميم خط واحد على القالب بأكمله (مع العلم أنها لا تنفع مع كل القوالب) ..
ما عليك سوى البحث عن body {
وأضف بعدها font-family: font-name
( إذا وجدت الكود السابق لا تقوم بإضافته مرة أخرى وإنما قم بالتعديل عليه فقط )
الى هنا نكون قد وصلنا الى ختام موضوع اليوم ... أتمنى أن تكونو قد اسفدتم ولو بالقيل ..
إذا أعجبك الدرس لا تبخل بمشاركته مع أصدقائك .
تدوينة جميلة , شكراً لك
ردحذفبواسطة : المدون
شكرا لمرورك .
حذفتم التطبيق على مرصدي:www.arabicco.com
ردحذفبالتوفيق .
حذفماشاء الله على الابداع
ردحذفاحسنت يا اخى الكريم
تحياتى لك : كينج نت
شكرا لتعليقك الطيب .
حذفما نوع الخط الموجود في المدونة
ردحذفالخط المستخدم هو الخط الخامس : DroidKufi-regular
حذفالشكر لله أخي .
ردحذفبارك الله فيك أخي على الدرس القيم ....سلام
ردحذفالله يباركلك أخي .. شكرا لمرورك وتفاعلك المشجع ^_^
حذفمشكور على الخطوط
ردحذفمع تحياتى : المطور السودانى
الشكر لله أخي .. شكرا لمرورك الطيب
حذفمرورك أروع ^_^
ردحذفشرح الاضافه غير مفهوم ولم استطيع انا اعملها بشكل جيد
ردحذفما الشئ الغير مفهوم في الشرح بالضبط ؟!
حذفباختصار شديد :
- يوجد كود لكل خط .. انسخه ثم ضعه فوق الوسم ]]> (ابحث عنه باستخدام ctrl+f)
- الخط الآن موجود في مدونتك .. باقي خطوة واحدة وهي تفعيله
- كما تعلم فإن كل نص في المدونة يجب أن يذكر حجمه ونوع الخط ولونه .. إلخ ..
- إذا أردت أن تطبق نوع الخط الجديد على نص موجود في مدونتك (وليكن محتويات القائمة مثلا) عليك تكتب (في الأكواد طبعا) اسم الخط الجديد بدلا من القديم في الجزء المخصص ل"نوع الخط"
- يتم ذلك بالبحث عن font-family: ثم كتابة اسم الخط الجديد بعدها .
اسف جدا اخي على الاطاله ولاكن عندما ابحث عن font-family: تضهر لي عدد كثير منها
ردحذفهذا هو المطلوب؛ اكتب اسم الخط الجديد أمام كل واحدة (بعد عمل الخطوات طبعا).
حذفشرح رائع اخي
ردحذفولكني اردت تعميم الخط في المدونه ولم اجد الوسم body {
بالإضافه الي اني اريد اضافه خط للعربيه وخط اخر للانجليزيه وتعميمهم للمدونه هل يمكنني ذلك ؟
لا أعتقد أنه بإمكانك التعميم ؛ عليك تغيير الخط يدويا أمام كل font-family:
حذففموضوع التعميم هذا لا ينطبق على كل القوالب
حذفالخطوط لم تعد تعمل والسبب أنهاملفاتها لم تم حذفها من السيرفرات
ردحذفالمدونة التي تتصفحها الآن دليل على أن الخطوط مازالت تعمل بشكل جيد :)
ردحذف