[CSS] الخط الاضافي المخصص لموقعك font-face – الكيفية ومشاكلها وحلولها
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
الصحيح وجدت شيء بسيط احتجته اليوم, لكن تعلمه لم يكن بتلك السهولة خصوصا مع تعدد المتصفحات, وهو مسألة الخط الاضافي لموقعك.
لعل المشكلة الرئيسية في تصميم المواقع هي الخطوط, فالغالب يلجأ لإستخدام الخطوط الافتراضية التي في العادة تكون موجودة في الانظمة مسبقاً, ويقرأها المتصفح بدون مشكلة.
لكن ماذا لأسباب جمالية احتاج لخط مخصص, غير افتراضي, ليس شرطاً أن يوجد في جهاز المستخدم, يعتقد الكثير أن هذا غير ممكن, حتى المطورين, لكنه ممكن.
الصحيح الامر سهل وهو باستخدام CSS مخصص من خلال @font-face, لكن الامر ربما ليس بتلك السهولة بالنسبة للغة العربية.
دعنا نتعرف على الجزء البسيط من تعريف الخط الجديد:
- ببساطة حمل خط بصيغة ttf , وكمثال ارفقت ملف هنا (اضغط هنا للتنزيل).
- ثم افتح صفحة فارغة 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>
وارى الناتج على المتصفحات.
هنا بالنسبة لي ظهرت لي مشكلة على الانترنت اكسبلورر, فكان لدي الحروف مقطعة , طبعا انا اقصد هنا العربية, اما الخطوط الاجنبية فلا اعرف ان وجدت او لا , لكن الاغلب لن يكون هنالك مشكلة !!!
بسيطة, الحل كالتالي:
- اذهب للرابط التالي : http://www.kirsle.net/wizards/ttf2eot.cgi
ومنه حدد الملف الاصلي, ثم اضغط زر التحويل.
سيظهر لك مكان الزر رابط باسم الملف الجديد واسمه يطابق اسم الملف الاصلي عدا الامتداد سيتغير, نزله وضعه في نفس مسار ملفات الخطوط الاخرى. - الان نذهب لكود الـ 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;
}
احفظ التغييرات وستجد إن شاء الله ان الامور اصبحت جيدة.
ملاحظاتي الاخيرة:
- لا اعرف ان كانت المشكلة هي بنوع معين من الملفات ام هي مشكلة عامة للملفات التي تحتوي الخط العربي.
- لم اجرب المتصفحات Opera و Safari فلربما واجهت هذه المتصفحات نفس المشكلة, اقصد مسألة تقطع الحروف, ان حدثت فالمشكلة ربما بخطأ بتحويل باق يالملفات, اقصد SVG و WOFF.
- الموضوع كتبته على عجالة, فإن كان هنالك خطأ ما او نقطة غير واضحة ارجوا ذكرها.
والحمد لله رب العالمين
ملاحظة اخيرة: الموضوع له فترة طويلة, وهو احد مواضيعي في موقع سوالف سوفت, نقلته مع تعديل بسيط..
مصدر الصورة
بارك الله فيك
هام جدا، الآن صار بالإمكان الاعتماد على الخطوط الموجودة في السيرفر
شكرا على الإعانة
شكرا لك اخى
بارك الله فيك
ده ايه الموقع اللذيذ ده
لكم منى اجمل تحية
مرسى أوى أوى بجد .. حقيقى الكلام مش هيعبر كفاية عن شكرى .. ربنا يوفقك ان شاء الله دايما
جزاك الله كل خير على المجهود الرائع
حدث مع يا اخى مشكله وهى ان الكلام مازل يظهر بصور متقطعه على
internet explorer
فما الحل مع العلم انى جربته على جميع المتصفحات وهى تعمل بصوره ممتازه الا مع المذكور سابقا
حياك الله اخي ابراهيم, بس لو تذكر لي شو اصدار الانترنت اكسبلورر لديك …
الاصدار السابع 7
مع العلم ان الطريقه كانت فى الصباح تعمل معى بشكل ممتاز على جميع المتصفحات الاخرى والان لا تعمل مع اى متصفح
ارجو منك اخى دمج مثال من صنعك اجربه لدى وجزاك الله كل خير
بالنسبة لانترنت اكسبلورر الاصدار 7, لا اعتقد انه يدعم اي حل مع اللغة العربية, جربت عليه من قبل ولم يكن هنالك نتيجة معه, اما انه لم يعد يعمل معك على باقي المتصفحات, هو ربما بسبب كثرة التعديلات احيانا يحدث خطأ في الكود, ارجع اعد الخطوات من جديد, حدثت معي مرات واعدت في كل مرة الخطوات المذكورة مرة اخرى ولم تكن هنالك مشكلة, وتأكد من تفريغ الكاش احتياطاً …
دعني أحييك من صميم قلبي على هذا الإبداع ، وأريد أن أعترف لك بالفضل في أن موضوعك هذا قد انتشلني من منتصف الطريق إلى خط النهاية في لمح البصر، ووفر عليّ مشقة البحث عن سر عدم تحويل الموقع للخوطو العربية بشكل سليم، فلك مني كل الشكر وبارك الله فيك وجزاك عني كل خير 🙂
السلام عليكم
أثمن على جهودك يا أخي لكن الطريقة التي عرضتها لا تنجح إلا إذا كان الخط موجودا ضمن الخطوط المثبتة في الجهاز, وهذا ما يقوم به الأمر local. 🙁
فجرب إزالته, أو حتى تجربة الصفحة التي قمت بعملها على جهاز لا يحتوي على الخط المستخدم وستلاحظ أن الأحرف غير متلاحمة, على جميع المتصفحات,
لا زلت إلى الآن أبحث عن حل ,,,,,,
اخي بارك الله فيك
الطريقة هي لحل عدم وجود الخط الاضافي على الجهاز, ولكن عدم تلاحم الخطوط هي مشكلة باللغة العربية, بمجرد ان الحروف ظهرت بالخط الاضافي الجديد فهذا يعني نجاح الطريقة ولو جزئياً, للاسف بالنسبة متصفح فايرفوكس عادت الحروف مقطعة, بعون الله إذا وجدت طريقة لحلها سوف اقوم بتحديث هذه التدوينة …
على ما اظن ان الطريقة هي ان يقوم المتصفح بتحميل الخط الاضافي الجديد في مجلد التخزين المؤقت وثم يقوم بعرضه بالخط الجديد, لذلك تجد local …
ولو قمت بزيارة الموقع مؤخراً للاحظت أن الموقع نفسه أزال خاصية الـ Bulletproof ووضع مكانها خاصية Smiley,, وهي تقوم بنفس المهمة لكن بوضع سمايلي مكان اسم الخط حتى لا تحدث مشاكل لو وجد خط آخر بنفس الاسم على الجهاز,,
اخي اظن انه استبدل الـ Bulletproofer بوضع Mo’ Bulletproofer مكانها , ما اعرف الـ Smiley اذكر اني مرة جربتها ولم تنجح, عموماً بعون الله لي عودة …
وجزاكم الله كل خير, وان وجدت طريقة لحل المشكلة فأرجوا ان تشاركنا بها ….
الـ Mo’ Bulletproofer السينتاكس لها مختلف عن الـ Smiley إلا أن كلتاهما لو اخترت – كما ذكرت في مقالتك – الخيار No Subsetting سيعطي نفس النتيجة أحرف الخط الذي تم رفعه لكنها غير متلاحمة ,,
من الأمس وأنا أجرب أغير في الخيارات وأقرأ مقالات علّي أتوصل إلى نتيجة لإظهار الأحرف العربية متصلة في الكلمة الواحدة لكن إلى الآن لم أصل لنتيجة مرضية ,, ولا زال البحث مستمرا ً ……
مشكلة تقطع الحروف من letter-spacing لازم تكون normal على الشكل التالي :
letter-spacing: normal;
فعلا موقع ممتاز للغايه
مشكوووووووور
أول مرة أزور مدونتك القيمة .. تهنئتي لك على المجهود المبذول والرائع..
لكم منى اجمل تحيه
المدونه فعلا راااااااااااائعه
لك مني اجمل تحيه
المدونه لذيذه مووووووووووت
لك مني اجمل تحيه
حقيقى موقع اخر حاجه وتحفه موووووت . اتمنى لكم الاستمرار بالنجاح والتقدم
مشكوووووووووووووووووووووووره
مشكلة تقطع الحروف سببها المؤكد هو ملف الخط نفسه، فهو لا يدعم العربية مع الكثير من الأنضمة المختلفة..
السلام عليكم،
من المهم التذكر أن وصل الحروف يقوم به تلقائيا البرنامج IDE الذي استُـعمِـل في إنشاء الصفحة، و كذلك المتصفح من جديد عند رؤية الصفحة — إلا عند استعمال font-face@.
سبب انفصال الحروف العربية عند استعمال خط font-face@ هو أن المتصفح يرى الخطوط منفصلة و يستبدلها بموافقها font-face@ — دون وصلها !!
هناك حلان (على الأقل)
١- كتب الحروف المتصلة عند إنشاء الصفحة – مثلا كلمة “أجـوبـة” هي مكتوبة “أ-ج-ـ-و-ب-ـ-ة” و اللازم كتبها على الشكل “ﺃ-ﺟ-ـ-ﻮ-ﺑ-ـ-ﺔ” (لاحظ التطويلين)
٢- استعمال لغة PHP و البرنامج الرائع AR-PHP و هو يحتوي على مزايا عديدة، منها وصل الحروف (Glyphs).
بوسعكم معاينة النتيجة على الرابط http://bit.ly/AF3mkA
فعلا مقال ممتاز بارك الله فيك و جزاك خيراً
المدونة حلوة جداً ، واتمني المزيد من الموضوعات الشيقة
يرجى منكم اعادة ارفاق الملف حيث انه في سوالف لا يعمل
بالنسبة إلي.. فش بعد جوجل فونتس
http://www.google.com/webfonts
فعلاً الموقع ممتاز ومفيد جداً لكم منى اجمل تحية
شكرا جزيلا
تدوينة رائعه للغاية ومواضيعها هايله
تحياتى لكم
الموقع حلو جداً جداً ، لك منى أجمل التحيات