قد تأخذ المعاينة بعض الوقت حتى تظهر الخطوط وهي معلومه يجب ان نعرفها وهي ان الخطوط المضافة يتم تحميلها كملفات مفرده لذا لا تقوم بتركيب أكثر من خط حتى لا تثقل مدونتك , يجب ان نعلم ان كل خط يتكون من جزئين أساسيين الجزء الأول هو ملف الخط وهو عبارة عن كود به رابط يحوي ملفات الخط وهذا ستتم إضافته تحت الوسم <head>
الجزء الثاني وهو الوسم الخاص بتفعيل الخط وهذا ما سنستخدمه في القالب ليظهر الخط وسنتعرف اكثر في الموضوع حول طريقة الإستخدام
أول شئ تفعله هو إختيار كود الخط الذي يعجبك وركبه تحت الوسم <head>
Amiri
الكود
<link href='http://fonts.googleapis.com/earlyaccess/amiri.css' rel='stylesheet' type='text/css'/>
وسم الخط font-family: 'Amiri';
Droid Arabic Kufi
الكود
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
وسم الخط font-family: 'Droid Arabic Kufi';
Lateef
الكود
<link href='http://fonts.googleapis.com/earlyaccess/lateef.css' rel='stylesheet' type='text/css'/>
وسم الخط font-family: 'Lateef';
Scheherazade
الكود
<link href='http://fonts.googleapis.com/earlyaccess/scheherazade.css' rel='stylesheet' type='text/css'/>
وسم الخط font-family: 'Scheherazade';
Thabit
الكود
<link href='http://fonts.googleapis.com/earlyaccess/thabit.css' rel='stylesheet' type='text/css'/>وسم الخط font-family: 'Thabit';
بعد ان ركبت كود الخط الذي يعجبك سنتعرف على طريقة إستخدامه وأين نضع وسم الخط
لتطبيق الخط على المدونة كلها سنبحث عن هذا الكود body سنجد بعده مباشرة هذا القوس { بعد هذا القوس او تحته
سنضيف وسم الخط إن وجدت تحت body اى وسم لخط آخر وستجده يحمل هذه الكلمة font-family قم بحذفه
طبعا لا تنسى أن تأخذ نسخة من قالبك لتجنب أى خطأ
قد تجد أن الخط يعمل مع بعض الاجزاء في القالب ومع بعض الأجزاء الأخرى لا يعمل
والسبب يرجع الى أن الاجزاء الأخرى تم تخصيص خط آخر لها ولتعديلها يجب ان تبحث عن كل كلمة font-family وتستبدلها بوسم الخط وقد تكون بعدة صيغ فيجب ان تحدد الجزء مضبوط
مثال
مثال font-family: Helvetica, sans-serif; يجب ان تحدد من بداية الكود حتى نهايته وهو ينتهي بهذا الرمز ;
أكواد لتنسيق الخط
حجم الخط font-size:10px; قم بزيادة الرقم لزيادة الحجم
جعل الخط سميك font-weight:bold;
لون الخط color:#000000; غير اللون بما تحب
وهذا مثال لكود body بالكامل أضفنا فيه الخط الأول وعدلنا السمك والحجمbody {
background: #000;
font-family: 'Amiri';
color: #000;
font-size:18px;
font-weight:bold;
margin: 0;
text-align: center;
}
أتمنى ان يكون الشرح واضح لكل من طلبه من زوارنا الكرام
تحياتي للجميع
إرسال تعليق