معهد سكيورتي العرب | وظائف خالية
وظائف 2013 سوق السيارات عقارات 2013 الارشيف البحث
اسم العضو:  
كلمة المرور:     
تسجيل المساعدة قائمة الأعضاء اظهار المشاركات الجديدة اظهارمشاركات اليوم

اهم الاخبار اليوم :                                  اهم الوظائف اليوم :                             اهم اخبار الرياضة اليوم :                      اهم حلقات التوك شو اليوم :

شرح الـ Web Font واضافة خطوط جديدة الى المنتدى


شرح الـ Web Font واضافة خطوط جديدة الى المنتدى
التوقيت الحالي : 11-22-2017, 10:37 AM
مستخدمين يتصفحوا هذا الموضوع: 1 ضيف
الكاتب: dr.wolf
آخر رد: dr.wolf
الردود : 0
المشاهدات : 1683

إضافة رد 

شرح الـ Web Font واضافة خطوط جديدة الى المنتدى

الكاتب الموضوع

رقم العضوية :3
الاقامة : ام الدنيا
التواجد : غير متصل
معلومات العضو
المشاركات : 7,392
الإنتساب : Oct 2010
السمعة : 5


بيانات موقعي اسم الموقع : سكيورتي العرب
اصدار المنتدى : 1.6.8

مشاركات : #1
شرح الـ Web Font واضافة خطوط جديدة الى المنتدى

شرح الـ Web Font واضافة خطوط جديدة الى المنتدى


السلام عليكم ورحمة الله وبركاته :

شرح الـ Web Font واضافة خطوط جديدة الى المنتدى



ما هو الـ Web Font ؟
الـ Web Font هي الخطوط التي تستخدم في تصميم مواقع الويب .

فعند تصميمك موقعا تحتاج تحديد نوع الخط المستخدم في تنسيق نص هذا الموقع ومن أشهر الخطوط المستخدمة : Tahoma و Arial و Verdana وغيرها و غيرها ....

فعندما يدخل الزائر الى الموقع يقوم المتصفح بالتعرف على النوع الخط الذي حدده المصمم ويبحث عنه في مجلد خطوط الموجود في الويندوز وان وجده يقوم بعرضه التصميم بهذا الخط



ولكن ماذا لو استخدم المصمم احد الخطوط الغير موجودة في جهاز الزائر ؟
حينها يقوم المتصفح بعرض النص الموجود بالتصميم بتنسيق الخط الافتراضي للمتصفح وهذا قد يسبب تشوه التصميم و التغير في شكله

لذا قام المطورين باستحداث طريقة لتخطي هذه العقبة وهي تحديد مسار الخط في تصميم الموقع بحيث يقوم المتصفح بعرض النص بتنسيق خط موجود على سيرفر الاستضافة وليس على جهاز الزائر و بالتالي لا يتأثر التصميم حتى لو لم يكن الخط موجود في جهاز الزائر .




كيف يتم تعريف المتصفح بان الخط موجود على الاستضافة وليس على جهاز الزائر ؟
ذالك يتم من خلال أنماط الـ CSS
بتحديد اسم الخط و مكان وجوده على سيرفر الاستضافة



هل يوجد أكثر من صيغة للـ Web Font ؟
نعم يوجد عدت صيغ و لكن كل صيغة تخص متصفح معين ولكن سيقتصر شرحنا على صيغة وحدة وهي
صيغة ( woff) ذلك لأنها مدعومة من معظم المتصفحات المشهورة .



كيف يمكن تحويل ملف الخط إلى صيغة ( woff) ؟
يتم ذالك من خلال أداة sfnt2woff وهي تقوم بتحويل ملفات الخطوط التي بصيغة ( TTF ) إلى خطوط بصيغة ( woff) .

وذالك بسحب وإسقاط ملف الخط إلى أيقونة الأداة كما هو موضح بالصورة :


[صورة مرفقة: 10522.gif]

يمكن تحميل الأدة المستخدمة من المرفق






بعد أن تم إنشاء الخط بصيغة ( woff) كيف يمكن استخدامه بالموقع ؟
يتم ذالك كما ذكرنا باستخدام الـ CSS ويتم تعريف اسم الخط وموقع على السيرفر من خلال الكود التالي في ملف الـ CSS و من ثم يتم ربط التصميم بملف الـ CSS الذي قمنا بإضافة تعريف الخط به .


[صورة مرفقة: 10523.png]

كود :
@font-face {
  font-family: 'Reko24';
  src: url('Reko24.woff') format('woff');
}


ملاحظة هامة : يجب ان يكون الخط المراد تحويله الى صيغة ( woff) مفتوح المصدر أي OpenType) Layout) ويمكن معرفة ذالك من خلال فتح ملف الخط وسيكون معرف في بدايته كما موضح بالصورة التالية :


[صورة مرفقة: 10524.png]

نأتي إلى التطبيق العملي وهو استغلال هذه الخاصية في إضافة خطوط جديدة إلى المنتدى


1- نقوم بتحويل ملف الخط الى صيغة ( woff ) كما هو موضح


[صورة مرفقة: 10522.gif]

2- نقوم بتعيرف الخط في ملف CSS

[صورة مرفقة: 10523.png]

- نقوم بكتابة الكود التالي في بداية قالب الهيدر لاستدعاء ملف الـ CSS


كود :
<link rel="stylesheet" type="text/css" href="font/style.css" />


[صورة مرفقة: 10525.png]

4- نقوم بكتابة قائمة اسماء الخطوط التى تم تعريفها في ملف الـ CSS في خيارات ستايل المنتدى

أ- نذهب الى خيار (الإستايلات والقوالب) ثم ( التحكم بالإستايلات ) ثم ( خيارات أدوات القوائم/Toolbar Menu Options )

[صورة مرفقة: 10526.png]

ب- ننزل الى اخر الصفحة ونضيف اسماء الخطوط كما هو موضح بالصورة كل اسم في سطر جديد


[صورة مرفقة: 10527.png]


لقد قمت بتجهيز مجموعة من الخطوط العربية وعددها 18 خط لتسهيل على الاعضاء الذين لم يفهو طريقة تغير ملف الخط الى صيغة woff

فقط حمل الملف التالي

http://www.up.mtwer.com/files/10529.rar

ثم فك الضغط وارفع مجلد Font الى مجلد المنتدى

ثم اضف هذا الكود في قالب الهيدر

كود :
<link rel="stylesheet" type="text/css" href="font/style.css" />

ثم اضف قائمة الاسماء الى ستايل المنتدى كما تم شرحه سابقة
وستجد قائمة بأسماء الخطوط في ملف نصي داخل مجلد Font
اسمه Font Name.txt

وهذه صور توضح الخطوط الذي قمت باعدادها لكم


[صورة مرفقة: 10528.gif]

ملاحظات هامة :
1- هذه الطريقة تعمل على جميع نسخ المنتديات وايضا في اي موقع يتم تصميمه
2- هذا الطريقة تعمل على جميع المتصفحات ولكن للاسف فقط متصفحي
explorer 9 و الفايرفوكس
يدعمى الخطوط العربية



منقول من معهد مطور

ادارة سكيورتي العرب


المواضيع المحتمل أن تكون متشابهة .
كود آخر مواضيع المنتدى عبر تقنية rss
فعاليات المنتدى بتأثيرات الجافا [Java-Slider] الاحترافية
كود خريطة المنتدى وأضفنا في مفضلتك وإسترجاع كلمة المرور والاتصال مع الادارة
04-15-2011 05:43 PM
إقتباس هذه الرسالة في الرد
إضافة رد 






سوق العرب | معهد سكيورتى العرب | وظائف خالية © 2017.
Google