[ css ] خطوط الويب

محروم.كوم · #1 03-11-2014, 04:50 AM

يسعى معظم مصممي الويب إلى تمييز مواقعهم عبر إضافة صور أو تنسيقات أو ألوان خاصة تميز تصميماتهم عن غيرها.
و لعل أغلب ما يسعى إليه المصممون هو استخدام خطوط خاصة بالموقع مصل موقع قناة العربية على سبيل المثال, لكن المشكلة التي ستواجههم هي أن هذا الخط سيعمل فقط عندما يكون ملف الخط (الفونت) مثبتاً في جهاز الزائر - و هو ليس حال كل الخطوط- و كانت فكرة إنشاء خطوط الويب و التي تحمل مع باقي عناصر الموقع لدى زيارة الموقع, طبعاً كالعادة إعتمد في هذه التقنية كل مستعرض على نمط خط معين و بالتالي إن استخدام خط من نمط تي تي إف ( TTF ) سيعمل على مستعرض و لن يعمل على أخر مثلاً و هنا تبزر المشكلة الأخرى فعند إختيار المصمم لنوع خط يجب أن يوفره بثلاث صيغ على الأقل,

و الحل؟
الحل سهل:
أولاً لندخل على الموقع

Everything Fonts - All you want to do with fonts... and more!
من خلال هذا الموقع تستطيع تحويل أي خط مثبت لديك إلى أي نوع آخر

حسناً ماهي أنماط الخطوط التي سنحتاجها؟
سنحتاج إلى woff, eot, ttf

مالنص الكودي الذي سيوضع في ملف التعريفات CSS
النص تقريباً واحد لتعريف أي خط و هو على الشكل التالي:
رمز Code:
@font-face{font-family:"Arabiya";
src:url("fonts/BoutrosArabiyaB.eot");
src:url('fonts/BoutrosArabiyaB.eot?') format('eot'),
url("fonts/BoutrosArabiyaB.woff") format("woff"),
url("fonts/BoutrosArabiyaB.ttf") format("truetype");}
كما هو ملاحظ في هذا المثال فقد استخدمت خط العربية و اسميت عائلة الخطوط باسمه Arabiya
و أرفقت ملفات الخطوط في مجلد اسمه fonts تحت المجلد الذي يقع فيه ملف التعريفات CSS

الآن كيف أستخدم هذا التعريف في صفحاتي
و لنفرض أنني أقوم مثلاً بتعريف ستايل للقوائم فسيكون التعريف على النحو التالي:
رمز Code:
a. {
font-size: 9pt; color: #FFF; font-family:'Arabiya'; font-weight:normal;
}
إذاً بهذه الطريقة أستطيع استخدام أي خط في مواقعي و لست بحاجة إلى استخدام خطوط مستضافة عند أي موقع أو التقييد بنوع خط تقيلدي

أرجوا أن يفيدكم الموضوع __DEFINE_LIKE_SHARE__

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
خطوط عربية 2013, اجدد خطوط عربية 2013, احدث خطوط عربية 2012, اجمل خطوط عربية 2012, اروع خطوط عربية 2012	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	06-24-2012 04:40 AM
[Font] : خطوط برنامج الكلك 2010 + خطوط lgl 3ink جديدة	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	12-31-2011 04:10 AM
شركة قاضيكة للتجارة الدولية خطوط و ماكينات تعبئة و تغليف و خطوط تصنيع مواد غذائية	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	07-20-2010 03:10 AM
شركة قاضيكو للتجارة الدولية خطوط و ماكينات تعبئة و تغليف و خطوط تصنيع مواد غذائية	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	07-20-2010 03:10 AM
خطوط مدفوعة لصنع شعارات الويب 2,0	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	07-16-2009 10:10 PM