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

[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 | أكتب تعليقك

  • توفيق
    الجمعة 8 أبريل 2011 | الساعة 2:09 م
    1

    بارك الله فيك
    هام جدا، الآن صار بالإمكان الاعتماد على الخطوط الموجودة في السيرفر
    شكرا على الإعانة

  • الأحد 3 يوليو 2011 | الساعة 5:44 م
    2

    شكرا لك اخى
    بارك الله فيك

  • الإثنين 4 يوليو 2011 | الساعة 10:57 ص
    3

    ده ايه الموقع اللذيذ ده
    لكم منى اجمل تحية

  • الإثنين 18 يوليو 2011 | الساعة 11:21 ص
    4

    مرسى أوى أوى بجد .. حقيقى الكلام مش هيعبر كفاية عن شكرى .. ربنا يوفقك ان شاء الله دايما

  • ابراهيم يسرى ابراهيم
    الثلاثاء 6 سبتمبر 2011 | الساعة 1:27 م
    5

    جزاك الله كل خير على المجهود الرائع
    حدث مع يا اخى مشكله وهى ان الكلام مازل يظهر بصور متقطعه على

    internet explorer

    فما الحل مع العلم انى جربته على جميع المتصفحات وهى تعمل بصوره ممتازه الا مع المذكور سابقا

  • الثلاثاء 6 سبتمبر 2011 | الساعة 2:27 م
    6

    حياك الله اخي ابراهيم, بس لو تذكر لي شو اصدار الانترنت اكسبلورر لديك …

  • ابراهيم يسرى ابراهيم
    الثلاثاء 6 سبتمبر 2011 | الساعة 4:40 م
    7

    الاصدار السابع 7
    مع العلم ان الطريقه كانت فى الصباح تعمل معى بشكل ممتاز على جميع المتصفحات الاخرى والان لا تعمل مع اى متصفح
    ارجو منك اخى دمج مثال من صنعك اجربه لدى وجزاك الله كل خير

  • الثلاثاء 6 سبتمبر 2011 | الساعة 4:47 م
    8

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

  • السبت 10 سبتمبر 2011 | الساعة 8:09 ص
    9

    دعني أحييك من صميم قلبي على هذا الإبداع ، وأريد أن أعترف لك بالفضل في أن موضوعك هذا قد انتشلني من منتصف الطريق إلى خط النهاية في لمح البصر، ووفر عليّ مشقة البحث عن سر عدم تحويل الموقع للخوطو العربية بشكل سليم، فلك مني كل الشكر وبارك الله فيك وجزاك عني كل خير 🙂

  • الأربعاء 28 سبتمبر 2011 | الساعة 2:20 م
    10

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

  • الأربعاء 28 سبتمبر 2011 | الساعة 2:59 م
    11

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

    على ما اظن ان الطريقة هي ان يقوم المتصفح بتحميل الخط الاضافي الجديد في مجلد التخزين المؤقت وثم يقوم بعرضه بالخط الجديد, لذلك تجد local …

  • الأربعاء 28 سبتمبر 2011 | الساعة 3:19 م
    12

    ولو قمت بزيارة الموقع مؤخراً للاحظت أن الموقع نفسه أزال خاصية الـ Bulletproof ووضع مكانها خاصية Smiley,, وهي تقوم بنفس المهمة لكن بوضع سمايلي مكان اسم الخط حتى لا تحدث مشاكل لو وجد خط آخر بنفس الاسم على الجهاز,,

  • الأربعاء 28 سبتمبر 2011 | الساعة 3:28 م
    13

    اخي اظن انه استبدل الـ Bulletproofer بوضع Mo’ Bulletproofer مكانها , ما اعرف الـ Smiley اذكر اني مرة جربتها ولم تنجح, عموماً بعون الله لي عودة …
    وجزاكم الله كل خير, وان وجدت طريقة لحل المشكلة فأرجوا ان تشاركنا بها ….

  • الأربعاء 28 سبتمبر 2011 | الساعة 3:39 م
    14

    الـ Mo’ Bulletproofer السينتاكس لها مختلف عن الـ Smiley إلا أن كلتاهما لو اخترت – كما ذكرت في مقالتك – الخيار No Subsetting سيعطي نفس النتيجة أحرف الخط الذي تم رفعه لكنها غير متلاحمة ,,
    من الأمس وأنا أجرب أغير في الخيارات وأقرأ مقالات علّي أتوصل إلى نتيجة لإظهار الأحرف العربية متصلة في الكلمة الواحدة لكن إلى الآن لم أصل لنتيجة مرضية ,, ولا زال البحث مستمرا ً ……

  • الإثنين 17 أكتوبر 2011 | الساعة 9:09 م
    15

    مشكلة تقطع الحروف من letter-spacing لازم تكون normal على الشكل التالي :
    letter-spacing: normal;

  • الأحد 13 نوفمبر 2011 | الساعة 2:58 م
    16

    فعلا موقع ممتاز للغايه
    مشكوووووووور

  • الإثنين 19 ديسمبر 2011 | الساعة 2:42 م
    17

    أول مرة أزور مدونتك القيمة .. تهنئتي لك على المجهود المبذول والرائع..
    لكم منى اجمل تحيه

  • الأحد 25 ديسمبر 2011 | الساعة 8:57 ص
    18

    المدونه فعلا راااااااااااائعه
    لك مني اجمل تحيه

  • الأربعاء 28 ديسمبر 2011 | الساعة 2:26 م
    19

    المدونه لذيذه مووووووووووت
    لك مني اجمل تحيه

  • الثلاثاء 24 يناير 2012 | الساعة 11:25 ص
    20

    حقيقى موقع اخر حاجه وتحفه موووووت . اتمنى لكم الاستمرار بالنجاح والتقدم
    مشكوووووووووووووووووووووووره

  • الخميس 16 فبراير 2012 | الساعة 5:17 ص
    21

    مشكلة تقطع الحروف سببها المؤكد هو ملف الخط نفسه، فهو لا يدعم العربية مع الكثير من الأنضمة المختلفة..

  • الأحد 11 مارس 2012 | الساعة 2:25 م
    22

    السلام عليكم،

    من المهم التذكر أن وصل الحروف يقوم به تلقائيا البرنامج IDE الذي استُـعمِـل في إنشاء الصفحة، و كذلك المتصفح من جديد عند رؤية الصفحة — إلا عند استعمال font-face@.

    سبب انفصال الحروف العربية عند استعمال خط font-face@ هو أن المتصفح يرى الخطوط منفصلة و يستبدلها بموافقها font-face@ — دون وصلها !!

    هناك حلان (على الأقل)

    ١- كتب الحروف المتصلة عند إنشاء الصفحة – مثلا كلمة “أجـوبـة” هي مكتوبة “أ-ج-ـ-و-ب-ـ-ة” و اللازم كتبها على الشكل “ﺃ-ﺟ-ـ-ﻮ-ﺑ-ـ-ﺔ” (لاحظ التطويلين)

    ٢- استعمال لغة PHP و البرنامج الرائع AR-PHP و هو يحتوي على مزايا عديدة، منها وصل الحروف (Glyphs).

    بوسعكم معاينة النتيجة على الرابط http://bit.ly/AF3mkA

  • الجمعة 30 مارس 2012 | الساعة 2:01 م
    23

    فعلا مقال ممتاز بارك الله فيك و جزاك خيراً

  • الأحد 8 أبريل 2012 | الساعة 12:00 م
    24

    المدونة حلوة جداً ، واتمني المزيد من الموضوعات الشيقة

  • ahmed
    السبت 5 مايو 2012 | الساعة 7:32 م
    25

    يرجى منكم اعادة ارفاق الملف حيث انه في سوالف لا يعمل

  • الخميس 10 مايو 2012 | الساعة 11:43 م
    26

    بالنسبة إلي.. فش بعد جوجل فونتس
    http://www.google.com/webfonts

  • الجمعة 1 فبراير 2013 | الساعة 4:03 م
    27

    فعلاً الموقع ممتاز ومفيد جداً لكم منى اجمل تحية

  • الإثنين 6 يناير 2014 | الساعة 11:40 ص
    28

    شكرا جزيلا

  • الأحد 16 مارس 2014 | الساعة 11:27 ص
    29

    تدوينة رائعه للغاية ومواضيعها هايله
    تحياتى لكم

  • الإثنين 24 مارس 2014 | الساعة 2:49 م
    30

    الموقع حلو جداً جداً ، لك منى أجمل التحيات


أكتب تعليقك