[ اسم الشرح طريقة ] : شرح طريقة خاصية @face-font في CSS.
[ الوصف ] : شرح طريقة تفعيل الخاصية بجميع اللغات و بكل المتصفحات.
[ يتوافق مع اي اصدار ] : جميع اصدارات CSS و المتصفحات الداعمة لـ CSS
[ موقع مقدم الشرح طريقة ] : MIUI Palestine
بسم الله الرحمن الرحيم
العديد من الاخوان حاولوا استخدام خاصية @face-font ولكنها لا تعمل مع اللغة العربية على جميع المتصفحات، وتعمل فقط مع انترنت اكسبلورير!!
معقول كل المتصفحات متخلفين الا انترنت اكسبلورير؟
طبعا لا، بس خطوط "EOT" مصممة له فقط.
بالشرح طريقة، ولضمان اقصى انواع التوافق، راح نستخدم 3 انواع خطوط، "EOT" "WOFF" "TTF"
EOT: لانترنت اكسبلورير من ابتداءً من نسخة 6
WOFF: فيرفوكس 3.6 فما فوق، انترنت اكسبلورير نسخة 9 فما فوق، سفاري 5.1 فما فوق و كروم 6 فما فوق
TTF: سفاري 3-5، كروم 4 فما فوق، فيرفوكس 3.5، و اوبيرا 10 فما فوق.
اما طريقة العمل كالتالي:
اولا بنزل خط من اي نوع، ويجب مراعات انة مجاني free ولا يتطلب حقوق والا تم اعتباره سرقة والعياذ باللة.
من الافضل ان يكون نوع الخط TTF و ان لم يكن، تستطيع تحويلة الى صيغة TTF بسهولة.
اولا بعد ما نحمل الخط، وراح اعمل المثال على خط Ibtisam للخط العربي وخط Call me, maybe للانجليزية.
عند عمل صفحة الويب و اضافة اكواد CSS لها يكون العمل كالتالي:
اول سطر من الصفحة يوضع فيه الكود code التالي، و في حالتنا سنضع كود codeين لانني سأستخدم خطين:
رمز Code:
@font-face { font-family: 'Callmemaybe'; src: url('Callmemaybe.eot?#') format('eot'), url('Callmemaybe.woff') format('woff'), url('Callmemaybe.ttf') format('truetype'); } @font-face { font-family: 'Ibtisam'; src: url('Ibtisam.eot?#') format('eot'), url('Ibtisam.woff') format('woff'), url('Ibtisam.ttf') format('truetype'); }
شرح طريقة الكود code:
@font-face: لإعلام النظام اننا نريد تضمين خط.
font-family: لتحديد الاسم الذي سندعو الخط بة.
src: url('xxx.eot?#') format('eot'): هنا نحدد للنظام نوع خط، ونحدد صيغتة و مسارة ايضاً.
url('xxx.woff') format('woff'): هنا ايضا خط اخر بزيادة التوافق مع ذكر المسار.
url('xxx.ttf') format('truetype'): وهنا ايضا خط اخر لزيادة التوافق مع ذكر المسار.
لاحظ انهن نفس الخط ولكن بصيغ مختلفة
والان انتهى التضمين وكل شيئ، ولم يتبقى الا الاشارة للخط في الكود code.
مثلا انا عندي سأكتب النص التالي، واعطية Class اسمة Eng-F للخط الانجليزي، و Ara-F للخط العربي:
رمز Code:
<p class="Eng-F">Ahmad Afef</p> <p class="Eng-F">MIUIPalestine.net</p> <p class="Ara-F">أحمد عفيف</p> <p class="Ara-F">ميوي فلسطين</p>
و في خانة CSS سيكون الكود code كالتالي:
رمز Code:
.Ara-F { text-align: center; font-size: 50px; font-family: Ibtisam, Tahoma, Geneva, Verdana, sans-serif; } .Eng-F { text-align: center; font-size: 40px; font-family: Callmemaybe, Tahoma, Geneva, Verdana, sans-serif; }
عند تشغيل الصفحة، لاحظ كيف يتم عرض الخط:
والنتيجة واحدة على جميع المتصفحات.
هذا هو الكود code الكامل للصفحة مع كود code CSS مضمن، في حال في اشي مش واضح بالشرح طريقة، ممكن يتوضح من الكود code:
رمز Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="en-us" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>CSS Test</title> <style type="text/css"> @font-face { font-family: 'Callmemaybe'; src: url('Callmemaybe.eot?#') format('eot'), url('Callmemaybe.woff') format('woff'), url('Callmemaybe.ttf') format('truetype'); } @font-face { font-family: 'Ibtisam'; src: url('Ibtisam.eot?#') format('eot'), url('Ibtisam.woff') format('woff'), url('Ibtisam.ttf') format('truetype'); } .Ara-F { text-align: center; font-size: 50px; font-family: Ibtisam, Tahoma, Geneva, Verdana, sans-serif; } .Eng-F { text-align: center; font-size: 40px; font-family: Callmemaybe, Tahoma, Geneva, Verdana, sans-serif; } </style> </head> <body> <p class="Eng-F">Ahmad Afef</p> <p class="Eng-F">MIUIPalestine.net</p> <p class="Ara-F">أحمد عفيف</p> <p class="Ara-F">ميوي فلسطين</p> </body> </html>
تحديث update:
اداة تحويل خطوط TTF الى woff:
تحميل ملف sfnt2woff من المرفقات، و لتحويل الخط، يكفي سحبة بالفأره والقاءة فوق ايقونة الاداة وسيتم التحويل تلقائيا
اداة تحويل خطوط TTF الى EOT:
تحميل ملف ttf2eot من المرفقات، للتحويل يجب استخدام برنامج CMD و كتابة الامر التالي:
رمز Code:
ttf2eot.exe font1.ttf font2.oet
ttf2eot.exe: اسم الاداة.
font1.ttf: الخط الاصلي.
font2.ttf: اسم الخط كيف نريدة بعد التحويل.
و بهذا يكون الدرس مفصل انتهى وان شاء الله انكم استفدتم منة، واي سؤال او استفسار لا تترددوا في طرحة.
ط®ط§طµظٹط© @face-font ط¨ط§ظ„ط¹ط±ط¨ظٹ ظ…طھظˆط§ظپظ‚ ظ…ط¹ ط¬ظ…ظٹط¹ ط§ظ„ظ…طھطµظپط*ط§طھ
sfnt2woff.zip (40.5 كيلوبايت, عدد مرات المشاهدة 181 مرة) [/TR]
رد مع اقتباس
