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

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

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