أحدث الخطوط العربية في الويب لمدونات بلوجر
السلام عليكم ورحمة الله وبركاته ..
أهلا بكم أعضاء وزوار مدونة ابداع هاوس
هذا هو الدرس الثاني من دورة تطوير المواقع [تابع الدرس الأول : كيفية تعريب قالب بلوجر]
من خلال هذا الموضوع سوف تتمكن من اضافة أروع وأحدث الخطوط في الويب لمدونات بلوجر.
[عدد الخطوط : سبعة]
طريقة التركيب :
أولا توجه الى لوحة التحكم >> قالب >> تحرير 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
( إذا وجدت الكود السابق لا تقوم بإضافته مرة أخرى وإنما قم بالتعديل عليه فقط )
الى هنا نكون قد وصلنا الى ختام موضوع اليوم ... أتمنى أن تكونو قد اسفدتم ولو بالقيل ..
إذا أعجبك الدرس لا تبخل بمشاركته مع أصدقائك .