إضافة خط جديد بإستخدام font-face selector

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



طبعاً هذا الشرح سيمنحك الحرية للخروج (كمصمم ويب) من دائرة الخطوط الآمنة والتي تبلغ تقريباً 13 خط و تمكنك من استخدام أى خط تريده في تصميمك.

حتى الآن المتصفحات التي تدعم هذه الخاصية بشكل كامل هى فيرفوكس 3.5 ، سفاري ، أوبرا وهى المتصفحات التي شخصياً أهتم بها عند العمل على أى مشروع جديد. أما عن اللعين (الإكسبلورر) فطبعاً لن يدعمها IE6 أو IE7 وطبعاً بسبب وجود النقص العام في دعم المعايير القياسية في التصميم و النقص الخاص في دعم خصائص CSS3 الجديدة فلا يدعمها IE8 هو الأخر (حسب أحد التدوينات بأحد المدونات المشهورة و التي تحاول دائماً تقصي الحقائق في معلوماتها المطروحة) و كلامهم فيه شيئ من الصحة و لكني قد جربته و عمل معي الخط الجديد عن طريق موافقة التصميم مع الإكسبلورر كما سأشرح كيفية عمل ذلك بعد قليل.

بالمناسبة فإن خاصية font-face selector ليست بخاصية جديدة وظهرت لأول مرة في CSS2 ثم تم استبعادها في النسخة CSS2.1 ثم جاءت لتظهر مرة أخرى في CSS3 و التي من المفترض أن يصبح دعمها أحد المعايير القياسية للمتصفحات.

أما عن جوجل كروم لا يدعم هذه الخاصية بشكل إفتراضي و مع إن بدأت جوجل دعم هذه الخاصية في متصفحها في أحد النسخ التجريبية المبكرة إلا إنها قد قامت بتعطيلها في النسخ الرسمية (لأسباب أمنية على حد قولهم) و إذا كنت تريد أن يدعمها جوجل كروم لديك يجب عليك تطبيق الأمر --enable-remote-fonts [المصدر] (نعم أحب أن أعرف تاريخ الخصائص التي أستخدمها و أطرحها في المدونة و البركة و كل الشكر للعم جوجل :P )

الطريقة

في البداية سأختار أحد الخطوط وهو خط Trading Post Bold. أو قم باستخدام الخط الذي تحبه ولكن تأكد من خلو جهازك من هذا الخط حتى إذا ظهر الخط بنجاح في متصفحك فتعرف وقتها أن الشرح نجح و تستطيع تطبيقه على أى خط تريده.
و تتم برفع الخط و من ثم إدراجه كخط رسمي في التصميم عن طريق السطور التالية

@font-face {
   font-family: yourFontName ;
   src: url( FontFileName.ttf ) format("truetype");
 }

 /* هنا تستخدم الخط كاستخدامك لأى خط عادي*/
 .yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif;
 }

يمكنك طبعاً تغيير القيمة "yourFontName" إلى أى اسم تريده أو استخدام أسم الخط الرسمي. أما في حالة مواجهتك أى من المشاكل و عدم القدرة على التطبيق وذلك في الغالب يرجع إلى كون الخط ttf و إنك قد أخطأت في تعريف نوع الخط إن كان truetype (ttf) أو opentype (ttf,otf) أو truetype-aat (ttf) أو embedded-opentype (eot) أو scalable-vector-graphic (svg,svgz) فيمكنك دائماً اللجوء إلى تحويل صيغة ملف الخط إلى Open Type و استخدامها بدون أى مشاكل.

كيف ؟

عن طريق تحويل صيغة الخط من ttf إلى eot بواسطة هذا المحول السهل الاستعمال أو عن طريق هذا البرنامج المجاني من مايكروسوفت.
قمت باستخدام الأداة الأولى لتحقيق توافقية التصميم مع IE8 و التي في النهاية تعطيك رابطاً لتحميل الخط محولاً كما تعطيك الكود لوضعه بملف CSS وضبط الخط بشكل جيد.



و من ثم قمت بإدراج الكود

@font-face {
font-family: Trading Post Bold;
src: url("trading-post-bold.eot") /* EOT file for IE */
}
@font-face {
font-family: Trading Post Bold;
src: url("trading-post-bold.ttf") /* TTF file for CSS3 browsers */
}

.text {
font-family: Trading Post Bold;
}

وكما تلاحظون فإن الكود الأول هو لموافقة التصميم مع IE8 وبس و بكذا يكون انتهى الشرح ....

لرؤية مثال على هذا الدرس تفضل بزيارة هذه الصفحة

لتحميل المثال - متضمنة الخط المستعمل في الشرح (الحجم 115 KB)