27 مارس 2011
التصنيف : المظفر.كوم
التعليقات : 31
13٬951 مشاهدة

[CSS] الخط الاضافي المخصص لموقعك font-face – الكيفية ومشاكلها وحلولها

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

الصحيح وجدت شيء بسيط احتجته اليوم, لكن تعلمه لم يكن بتلك السهولة خصوصا مع تعدد المتصفحات, وهو مسألة الخط الاضافي لموقعك.

لعل المشكلة الرئيسية في تصميم المواقع هي الخطوط, فالغالب يلجأ لإستخدام الخطوط الافتراضية التي في العادة تكون موجودة في الانظمة مسبقاً, ويقرأها المتصفح بدون مشكلة.

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

الصحيح الامر سهل وهو باستخدام CSS مخصص من خلال @font-face, لكن الامر ربما ليس بتلك السهولة بالنسبة للغة العربية.

دعنا نتعرف على الجزء البسيط من تعريف الخط الجديد:

  1. ببساطة حمل خط بصيغة ttf , وكمثال ارفقت ملف هنا (اضغط هنا للتنزيل).
  2. ثم افتح صفحة فارغة html وقم بتعريف الستايل بهذا الشكل:
كود:
@font-face {
font-family: 'HacenTunisia';
src:  url('HacenTunisia.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

مع ملاحظة أن font-family تستطيع أن تعرفه كما تشاء, أي بأي اسم تريده, و src يحتوي رابط الخط على السيرفر لديك.

وجرب الان هذا الخط الجديد, ليكن مثلا مع div :

كود:
<div style="font-family: HacenTunisia">بسم الله الرحمن الرحيم</div>

الان انظر للناتج على المتصفحات المشهورة, بالنسبة لي جربت على فايرفوكس وانترنت اكسبلورر وكروم, كان الناتج يطبق فقط على الفايرفوكس.

حسنا ما الحل؟؟, الحل ببساطة هو توليد مجموعة خطوط متنوعة لمختلف المتصفحات, فمثلا متصفح انترنت اكسبلورر لا يتقبل الا ملف خط من نوع eot واما فايرفوكس فلا يتعرف على هذا الامتداد !!

الصحيح أنّي جلبت لكم اداة ممتاز لعمل هذا, وهي على الرابط التالي :

http://www.fontsquirrel.com/fontface/generator

اولاً: اختر الملف الذي تريد التحويل منه وهو الذي قمت بتنزيله من هنا قبل قليل, من خلال زر Add fonts .

ثانياً: ثم باختيار Expert , سيظهر لك عدة خيارات لكن من هذه الخيارات نحتاج تغيير Subsetting و CSS Formats ..
والاهم هو Subsetting, غيرها الى No Subsetting .
اما CSS Formats فغيرها الى Bulletproof (Original)

ثالثاً: سيكون امامك زر Download YourKit اضغط عليه وسينزل لديك ملف مضغوط فك الضغط عنه وستجد عدة ملفات, قم بنسخ ملفات الخط الى المسار الذي تريده, وافتح ملف الـ stylesheet.css ستجد الكود الخاص بالـ font-face جاهز امامك, اجري التعديلات التي تريدها, مثلا مسار الخطوط, و اسم الخط المخصص الجديد, مثلاً, سيكون الناتج للـFont-face هو كالتالي:

كود:
@font-face {
font-family: 'HacenTunisia';
src: url('hacentunisia-webfont.eot');
src: local('Hacen Tunisia'), local('HacenTunisia'), url('hacentunisia-webfont.woff') format('woff'), url('hacentunisia-webfont.ttf') format('truetype'), url('hacentunisia-webfont.svg#webfont01d4aYpI') format('svg');
font-weight: normal;
font-style: normal;
}

استخدمه كالتالي :

كود:
<div style="font-family: HacenTunisia">بسم الله الرحمن الرحيم</div>

وارى الناتج على المتصفحات.

هنا بالنسبة لي ظهرت لي مشكلة على الانترنت اكسبلورر, فكان لدي الحروف مقطعة , طبعا انا اقصد هنا العربية, اما الخطوط الاجنبية فلا اعرف ان وجدت او لا , لكن الاغلب لن يكون هنالك مشكلة !!!

بسيطة, الحل كالتالي:

  1. اذهب للرابط التالي : http://www.kirsle.net/wizards/ttf2eot.cgi
    ومنه حدد الملف الاصلي, ثم اضغط زر التحويل.
    سيظهر لك مكان الزر رابط باسم الملف الجديد واسمه يطابق اسم الملف الاصلي عدا الامتداد سيتغير, نزله وضعه في نفس مسار ملفات الخطوط الاخرى.
  2. الان نذهب لكود الـ CSS ونجري عليه بعض التعديلات, بحيث تعيد تعريف الخط من نوع ttf للخط الاصلي, و ملف الـ eot للذي قمنا بتوليده من جديد وذلك بالشكل التالي (لاحظ الملفين ttf و eot في الكود) :
كود:
@font-face {
font-family: 'HacenTunisia';
src: url('HacenTunisia.eot');
src: local('Hacen Tunisia'), local('HacenTunisia'), url('hacentunisia-webfont.woff') format('woff'), url('HacenTunisia.ttf') format('truetype'), url('hacentunisia-webfont.svg#webfont01d4aYpI') format('svg');
font-weight: normal;
font-style: normal;
}

احفظ التغييرات وستجد إن شاء الله ان الامور اصبحت جيدة.

ملاحظاتي الاخيرة:

  1. لا اعرف ان كانت المشكلة هي بنوع معين من الملفات ام هي مشكلة عامة للملفات التي تحتوي الخط العربي.
  2. لم اجرب المتصفحات Opera و Safari فلربما واجهت هذه المتصفحات نفس المشكلة, اقصد مسألة تقطع الحروف, ان حدثت فالمشكلة ربما بخطأ بتحويل باق يالملفات, اقصد SVG و WOFF.
  3. الموضوع كتبته على عجالة, فإن كان هنالك خطأ ما او نقطة غير واضحة ارجوا ذكرها.

والحمد لله رب العالمين

 

ملاحظة اخيرة: الموضوع له فترة طويلة, وهو احد مواضيعي في موقع سوالف سوفت, نقلته مع تعديل بسيط..
مصدر الصورة


عدد التعليقات : 31 | أكتب تعليقك


أكتب تعليقك