http://www.dzbatna.com/images/icons/iconrote.gif ط®ط§طµظٹط© @face-font ط¨ط§ظ„ط¹ط±ط¨ظٹ ظ…طھظˆط§ظپظ‚ ظ…ط¹ ط¬ظ…ظٹط¹ ط§ظ„ظ…طھطµظپط*ط§طھ
[ اسم الشرح طريقة ] : شرح طريقة خاصية @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:
رمز 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'); }
@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:
Ahmad Afef
MIUIPalestine.net
أحمد عفيف
ميوي فلسطين
و في خانة 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:
CSS Test Ahmad Afef
MIUIPalestine.net
أحمد عفيف
ميوي فلسطين
تحديث update:
اداة تحويل خطوط TTF الى woff:
تحميل ملف sfnt2woff من المرفقات، و لتحويل الخط، يكفي سحبة بالفأره والقاءة فوق ايقونة الاداة وسيتم التحويل تلقائيا
اداة تحويل خطوط TTF الى EOT:
تحميل ملف ttf2eot من المرفقات، للتحويل يجب استخدام برنامج CMD و كتابة الامر التالي:
رمز Code:
ttf2eot.exe font1.ttf font2.oet
ttf2eot.exe: اسم الاداة.
font1.ttf: الخط الاصلي.
font2.ttf: اسم الخط كيف نريدة بعد التحويل.
http://www.dzbatna.com/attachments/6...567565-cmd.png
و بهذا يكون الدرس مفصل انتهى وان شاء الله انكم استفدتم منة، واي سؤال او استفسار لا تترددوا في طرحة.
التعديل الأخير كان بواسطة ahmad.afef; 07 - 01 - 2014 الساعة 17:07
الملفات المرفقة [TR]
http://www.traidnt.net/vb/images/attach/zip.gif sfnt2woff.zip (40.5 كيلوبايت, عدد مرات المشاهدة 181 مرة) [/TR]
[TR]
http://www.traidnt.net/vb/images/attach/zip.gif ttf2eot.zip (41.9 كيلوبايت, عدد مرات المشاهدة 173 مرة) [/TR]
https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
