الدرس26 : تغيير الخط باستخدام خط مخصص font-face@ الجزء1

خط مخصص مع font-face@ :

هذا الدرس معقد قليلا لكن فقط تابعه خطوة بخطوة و ستفهمه إنشاء الله. هذه الخاصية جاءت مع css3 وهي تسمح لنا بوضع أي نوع خط على موقعنا. و تعمل على جميع المتصفحات تقريبا. لكن قبل دلك يجب أن تعلم بعض الأشياء. 

- يجب أن لا يكون حجم الخط أكتر من 1MO حثى يستطيع متعفح الزائر تحميله.

- معظم الخطوط تحمل حقوق ملكية صانعيها. لهذا يمكنك تحميل خطوط مجانية من هذا الموقع fontsquirrel.com.

- الخطوط بها العديد من الصيغ و هي على الشكل التالي:

ttf : TrueType Font. : تعمل في جميع المتصفحات + IE9 .

eot : Embedded OpenType. : تعمل على جميع إصدارات IE لأنها من صنع Microsoft.

otf : OpenType Font. : لا تعمل على IE .

svg : SVG Font. : تعمل حاليا 02/08/2013 على iPhones وiPads .

woff : Web Open Font Format. : صيغة جديدة تعمل على جميع المتصفحات و IE9.

في لغة css3 نكتب الكود مثلا هكدا للتجربة و التوضيح فقط :

@font-face {
font-family: 'Police';
src: url('Police.eot');
}

ملف Police.eot يجب أن تحفظه في نفس الملف الدي به صفحة css . إدا وضعته في مكان آخر يجب أن تراجع درس الروابط من هنا.

ما أردت توصيله لكم في هدا الجزء هو أن الخطوط لها حقوق ملكية و أنه يوجد صيغ عديدة من الخطوط . و كل صيغة لها متصفحات تقرأها و أخرى لا . في الجزء القادم سوف نعلم كيف نجعل الخط يضهر جيدا مع جميع المتصفحات. ننتظر تعليقاتكم و شكرا.