walid
10-31-2013, بتوقيت غرينيتش 06:19 AM
http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* ط§ظ„ظ€ Web Font ظˆط§ط¶ط§ظپط© ط®ط·ظˆط· ط¬ط¯ظٹط¯ط© ط§ظ„ظ‰ ط§ظ„ظ…ظ†طھط¯ظ‰ (http://www.dzbatna.com/t1835860/)
http://img838.imageshack.us/img838/5782/bsmlh21.png
موضوعنا اليوم لم يتم شرح طريقةه أو مناقشته في أي من المواقع العربية للأسف رغم أهميته ورغم اهتمام المواقع الأجنبية به وهو مهم لكل مصمم مواقع فهو يفتح له مجال الإبداع و إعطاء تصميمه لمسة جمالية وفنية رائعة
موضوعنا يتحدث عن الـ Web Font
ما هو الـ Web Font ؟
الـ Web Font هي الخطوط التي تستخدم في تصميم مواقع الويب .
فعند تصميمك موقعا تحتاج تحديد نوع الخط المستخدم في تنسيق نص هذا الموقع ومن أشهر الخطوط المستخدمة : Tahoma و Arial و Verdana وغيرها و غيرها ....
فعندما يدخل الزائر الى الموقع يقوم المتصفح بالتعرف على النوع الخط الذي حدده المصمم ويبحث عنه في مجلد خطوط الموجود في الويندوز وان وجده يقوم بعرضه التصميم بهذا الخط
ولكن ماذا لو استخدم المصمم احد الخطوط الغير موجودة في جهاز الزائر ؟
حينها يقوم المتصفح بعرض النص الموجود بالتصميم بتنسيق الخط الافتراضي للمتصفح وهذا قد يسبب تشوه التصميم و التغير في شكله
لذا قام المطورين باستحداث طريقة لتخطي هذه العقبة وهي تحديد مسار الخط في تصميم الموقع بحيث يقوم المتصفح بعرض النص بتنسيق خط موجود على سيرفر SERVER الاستضافة HOTING وليس على جهاز الزائر و بالتالي لا يتأثر التصميم حتى لو لم يكن الخط موجود في جهاز الزائر .
كيف يتم تعريف المتصفح بان الخط موجود على الاستضافة HOTING وليس على جهاز الزائر ؟
ذالك يتم من خلال أنماط الـ CSS
بتحديد اسم الخط و مكان وجوده على سيرفر SERVER الاستضافة HOTING
هل يوجد أكثر من صيغة للـ Web Font ؟
نعم يوجد عدت صيغ و لكن كل صيغة تخص متصفح معين ولكن سيقتصر شرح طريقةنا على صيغة وحدة وهي
صيغة ( woff) ذلك لأنها مدعومة من معظم المتصفحات المشهورة .
كيف يمكن تحويل ملف الخط إلى صيغة ( woff) ؟
يتم ذالك من خلال أداة sfnt2woff وهي تقوم بتحويل ملفات الخطوط التي بصيغة ( TTF ) إلى خطوط بصيغة ( woff) .
وذالك بسحب وإسقاط ملف الخط إلى أيقونة الأداة كما هو موضح بالصورة :
http://www.up.mtwer.com/files/10522.gif
يمكن تحميل الأدة المستخدمة من المرفق
بعد أن تم إنشاء الخط بصيغة ( woff) كيف يمكن استخدامه بالموقع ؟
يتم ذالك كما ذكرنا باستخدام الـ CSS ويتم تعريف اسم الخط وموقع على السيرفر SERVER من خلال الكود code التالي في ملف الـ CSS و من ثم يتم ربط التصميم بملف الـ CSS الذي قمنا بإضافة تعريف الخط به .
http://www.up.mtwer.com/files/10523.png
رمز PHP:
<code style="white-space:nowrap"> <code> @font-face {
font-family: 'Reko24';
src: url('Reko24.woff') format('woff');
}
</code> </code>
ملاحظة هامة : يجب ان يكون الخط المراد تحويله الى صيغة ( woff) مفتوح المصدر أي OpenType) Layout) ويمكن معرفة ذالك من خلال فتح ملف الخط وسيكون معرف في بدايته كما موضح بالصورة التالية :
http://www.up.mtwer.com/files/10524.png
نأتي إلى التطبيق العملي وهو استغلال هذه الخاصية في إضافة خطوط جديدة إلى المنتدى forum
1- نقوم بتحويل ملف الخط الى صيغة ( woff ) كما هو موضح
http://www.up.mtwer.com/files/10522.gif
2- نقوم بتعيرف الخط في ملف CSS
http://www.up.mtwer.com/files/10523.png
3- نقوم بكتابة الكود code التالي في بداية قالب template الهيدر header لاستدعاء ملف الـ CSS
رمز PHP:
<code style="white-space:nowrap"> <code> <link rel="stylesheet" type="text/css" href="font/style.css" />
</code> </code>
http://www.up.mtwer.com/files/10525.png
4- نقوم بكتابة قائمة اسماء الخطوط التى تم تعريفها في ملف الـ CSS في خيارات ستايل style المنتدى forum
أ- نذهب الى خيار (الإستايل styleات والقوالب) ثم ( التحكم بالإستايل styleات ) ثم ( خيارات أدوات القوائم/Toolbar Menu Options )
http://www.up.mtwer.com/files/10526.png
ب- ننزل الى اخر الصفحة ونضيف اسماء الخطوط كما هو موضح بالصورة كل اسم في سطر جديد
http://www.up.mtwer.com/files/10527.png
لقد قمت بتجهيز مجموعة من الخطوط العربية وعددها 18 خط لتسهيل على الاعضاء الذين لم يفهو طريقة تغير ملف الخط الى صيغة woff
فقط حمل الملف التالي
http://up.mtwer.com/index.php?action=getfilethumb&id=10529 (http://www.up.mtwer.com/files/10529.rar)
ثم فك الضغط وارفع مجلد Font الى مجلد المنتدى forum
ثم اضف هذا الكود code في قالب template الهيدر header
رمز PHP:
<code style="white-space:nowrap"> <code> <link rel="stylesheet" type="text/css" href="font/style.css" />
</code> </code>
ثم اضف قائمة الاسماء الى ستايل style المنتدى forum كما تم شرح طريقةه سابقة
وستجد قائمة بأسماء الخطوط في ملف نصي داخل مجلد Font
اسمه Font Name.txt
وهذه صور توضح الخطوط الذي قمت باعدادها لكم
http://www.up.mtwer.com/files/10528.gif
ملاحظات هامة :
1- هذه الطريقة تعمل على جميع نسخ المنتديات وايضا في اي موقع يتم تصميمه
2- هذا الطريقة تعمل على جميع المتصفحات ولكن للاسف فقط متصفحي
explorer 9 و الفايرفوكس
يدعمى الخطوط العربية
بالنهاية اشكركم على حسن المتابعة واسف على الاطالة ولكن
اردت ان اوضح الفكرة لأكبر عد من الاعضاء
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://img838.imageshack.us/img838/5782/bsmlh21.png
موضوعنا اليوم لم يتم شرح طريقةه أو مناقشته في أي من المواقع العربية للأسف رغم أهميته ورغم اهتمام المواقع الأجنبية به وهو مهم لكل مصمم مواقع فهو يفتح له مجال الإبداع و إعطاء تصميمه لمسة جمالية وفنية رائعة
موضوعنا يتحدث عن الـ Web Font
ما هو الـ Web Font ؟
الـ Web Font هي الخطوط التي تستخدم في تصميم مواقع الويب .
فعند تصميمك موقعا تحتاج تحديد نوع الخط المستخدم في تنسيق نص هذا الموقع ومن أشهر الخطوط المستخدمة : Tahoma و Arial و Verdana وغيرها و غيرها ....
فعندما يدخل الزائر الى الموقع يقوم المتصفح بالتعرف على النوع الخط الذي حدده المصمم ويبحث عنه في مجلد خطوط الموجود في الويندوز وان وجده يقوم بعرضه التصميم بهذا الخط
ولكن ماذا لو استخدم المصمم احد الخطوط الغير موجودة في جهاز الزائر ؟
حينها يقوم المتصفح بعرض النص الموجود بالتصميم بتنسيق الخط الافتراضي للمتصفح وهذا قد يسبب تشوه التصميم و التغير في شكله
لذا قام المطورين باستحداث طريقة لتخطي هذه العقبة وهي تحديد مسار الخط في تصميم الموقع بحيث يقوم المتصفح بعرض النص بتنسيق خط موجود على سيرفر SERVER الاستضافة HOTING وليس على جهاز الزائر و بالتالي لا يتأثر التصميم حتى لو لم يكن الخط موجود في جهاز الزائر .
كيف يتم تعريف المتصفح بان الخط موجود على الاستضافة HOTING وليس على جهاز الزائر ؟
ذالك يتم من خلال أنماط الـ CSS
بتحديد اسم الخط و مكان وجوده على سيرفر SERVER الاستضافة HOTING
هل يوجد أكثر من صيغة للـ Web Font ؟
نعم يوجد عدت صيغ و لكن كل صيغة تخص متصفح معين ولكن سيقتصر شرح طريقةنا على صيغة وحدة وهي
صيغة ( woff) ذلك لأنها مدعومة من معظم المتصفحات المشهورة .
كيف يمكن تحويل ملف الخط إلى صيغة ( woff) ؟
يتم ذالك من خلال أداة sfnt2woff وهي تقوم بتحويل ملفات الخطوط التي بصيغة ( TTF ) إلى خطوط بصيغة ( woff) .
وذالك بسحب وإسقاط ملف الخط إلى أيقونة الأداة كما هو موضح بالصورة :
http://www.up.mtwer.com/files/10522.gif
يمكن تحميل الأدة المستخدمة من المرفق
بعد أن تم إنشاء الخط بصيغة ( woff) كيف يمكن استخدامه بالموقع ؟
يتم ذالك كما ذكرنا باستخدام الـ CSS ويتم تعريف اسم الخط وموقع على السيرفر SERVER من خلال الكود code التالي في ملف الـ CSS و من ثم يتم ربط التصميم بملف الـ CSS الذي قمنا بإضافة تعريف الخط به .
http://www.up.mtwer.com/files/10523.png
رمز PHP:
<code style="white-space:nowrap"> <code> @font-face {
font-family: 'Reko24';
src: url('Reko24.woff') format('woff');
}
</code> </code>
ملاحظة هامة : يجب ان يكون الخط المراد تحويله الى صيغة ( woff) مفتوح المصدر أي OpenType) Layout) ويمكن معرفة ذالك من خلال فتح ملف الخط وسيكون معرف في بدايته كما موضح بالصورة التالية :
http://www.up.mtwer.com/files/10524.png
نأتي إلى التطبيق العملي وهو استغلال هذه الخاصية في إضافة خطوط جديدة إلى المنتدى forum
1- نقوم بتحويل ملف الخط الى صيغة ( woff ) كما هو موضح
http://www.up.mtwer.com/files/10522.gif
2- نقوم بتعيرف الخط في ملف CSS
http://www.up.mtwer.com/files/10523.png
3- نقوم بكتابة الكود code التالي في بداية قالب template الهيدر header لاستدعاء ملف الـ CSS
رمز PHP:
<code style="white-space:nowrap"> <code> <link rel="stylesheet" type="text/css" href="font/style.css" />
</code> </code>
http://www.up.mtwer.com/files/10525.png
4- نقوم بكتابة قائمة اسماء الخطوط التى تم تعريفها في ملف الـ CSS في خيارات ستايل style المنتدى forum
أ- نذهب الى خيار (الإستايل styleات والقوالب) ثم ( التحكم بالإستايل styleات ) ثم ( خيارات أدوات القوائم/Toolbar Menu Options )
http://www.up.mtwer.com/files/10526.png
ب- ننزل الى اخر الصفحة ونضيف اسماء الخطوط كما هو موضح بالصورة كل اسم في سطر جديد
http://www.up.mtwer.com/files/10527.png
لقد قمت بتجهيز مجموعة من الخطوط العربية وعددها 18 خط لتسهيل على الاعضاء الذين لم يفهو طريقة تغير ملف الخط الى صيغة woff
فقط حمل الملف التالي
http://up.mtwer.com/index.php?action=getfilethumb&id=10529 (http://www.up.mtwer.com/files/10529.rar)
ثم فك الضغط وارفع مجلد Font الى مجلد المنتدى forum
ثم اضف هذا الكود code في قالب template الهيدر header
رمز PHP:
<code style="white-space:nowrap"> <code> <link rel="stylesheet" type="text/css" href="font/style.css" />
</code> </code>
ثم اضف قائمة الاسماء الى ستايل style المنتدى forum كما تم شرح طريقةه سابقة
وستجد قائمة بأسماء الخطوط في ملف نصي داخل مجلد Font
اسمه Font Name.txt
وهذه صور توضح الخطوط الذي قمت باعدادها لكم
http://www.up.mtwer.com/files/10528.gif
ملاحظات هامة :
1- هذه الطريقة تعمل على جميع نسخ المنتديات وايضا في اي موقع يتم تصميمه
2- هذا الطريقة تعمل على جميع المتصفحات ولكن للاسف فقط متصفحي
explorer 9 و الفايرفوكس
يدعمى الخطوط العربية
بالنهاية اشكركم على حسن المتابعة واسف على الاطالة ولكن
اردت ان اوضح الفكرة لأكبر عد من الاعضاء
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
