نظرة: على خطوط الويب وكيفية استخدام خطوط خاصة لمدونات بلوقر

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

أولاً: كيف تتعامل المتصفحات مع الخطوط ؟

  نَعلمُ أن المتصفح يُظهر الموقع حسب التعليمات والخصائص التي يكتبها المصمم في ورقة الأنماط CSS ، وورقة الأنماط أيضاً تحدد اسم الخط وخصائصه كالمقاس واللون. الخطوط هي عبارة عن ملفات قابعة في حاسوب زائر الموقع، فلو اختار مصمم الموقع الخط ( Arial ) فسيكتب اسمه في خصائص الأنماط CSS وبهذا سيطلب المتصفح هذا الخط من مكتبة الخطوط في حاسوب زائر الموقع، فإذا وجد هذا الخط سيتم عرضه بشكلٍ سليم، وان لم يوجد سيعرض المتصفح الموقع بخط آخر وغالباً سيكون ( tahoma ). وتحسباً لإمكانية عدم وجود الخط المطلوب فإن المصمم يكتب أسماء ثلاثة خطوط أو أكثر يتم طلبها حسب ترتيبها فإذا لم يوجد الخط الأول يعرض الخط الثاني وإذا لم يوجد الثاني يطلب الثالث وهكذا . . . في مدونات بلوقر غالباً نحدد اسم الخط بكتابة سطر كهذا:

.post-body {   font-family: Arial; }

لا تنسى أن الخط arial عبارة عن ملف موجود في حاسوب الزائر ، ولكون هناك احتمال عدم وجود الخط أو أي خلل آخر، فيفضل كتابة أكثر من خط ، مثلاً:

.post-body { font-family:arial,"Traditional Arabic",tahoma; }

تلميح: إذا احتوى اسم الخط على مسافة فارغه فيجب كتابة علامة تنصيص على جانبي اسم الخط . . .

ثانياً: أشهر أنواع صيغ الخطوط web fonts formats

على مر الأيام طورت شركات مثل ميكروسوفت وآبل وأدوبي خطوط بصيغ مختلفة. اليوم هناك صيغ كثيرة للخطوط ، سأذكر أربعة منها وهي التي لا يسعنا جهلها ، وهي:

1. TrueType - ttf : من تطوير آبل وهي الصيغة الأشهر، ولن يخلو نظام حاسوبي إلا وفيه عدد كبير من الخطوط بهذه الصيغة، وستجد عدد كبير من الخطوط العربية المتوفرة في الشبكة العالمية بهذه الصيغة ...  للاستزاده.

2. OpenType – otf : هي امتداد لصيغة TrueType وما فهمته أن هذا النوع يحتوي على حزمة حروف أكبر وبالتالي أكثر قدرة على عرض وطباعة الحروف مع دعم أفضل للغات المختلفة ! وهو نتيجة تعاون بين أدوبي وميكروسوفت. للاستزاده.

3. Embedded OpenType – eot : اشتقتها ميكروسوفت من صيغة من OpenType، هذه الصيغة حصرية لمتصفح إنترنت اكسبلورر. هذا النوع قد يحتوي على عناوين لمواقع محددة يعمل لها فقط، لحفظ الحقوق طبعاً!. البعض يعتقد أن هذه الصيغة من الخطوط يمكن تجاهلها ولكن هذا خطأ فادح ( حتى هذا اليوم ) لأن انترنت اكسبلورر الثامن IE8 ما زال هو المهيمن.

4. WebOpen Font Format – woff: هذه الصيغة في حقيقتها مجرد وعاء لـ TrueType أو OpenType ، ولكن هذا الوعاء مضغوط ليحقق حجم أقل ليناسب متطلبات المواقع من ناحية سرعة عرض الخطوط، بالإضافة إلى أن هذه الصيغة تحتوي على معلومات أساسية MetaData عن الخط مثل المصنع ورخصة الاستخدام ! لذلك هي الصيغة التي توصي بها رابطة الشبكة العالمية W3C . وهي الصيغة هي التي تسعى جميع المتصفحات لدعمها.

تلميح:

• هناك صيغة يتناولها بعض المهتمين وهي صيغة svg وهي خاصة بأنظمة IOS ؛ ولاعتبارات من أهمها كبر حجمها وكون النظام المحدث من IOS يدعم ttf مثلاً ( ios لا يدعم خطوط الويب العربية ! ) ، فأرى أنها صيغة تستحق أن لا يلتفت اليها !.
• باستثناء الصيغة woff فإن جميع الصيغ السابقة قد يصلح استخدامها كخط ويب مباشرة وقد لا تصلح ، ولذلك يتوجب علينا اختبار أي خط نقع عليه، مالم نجده معروض كخط ويب من المصدر.

ثالثاً: دعم المتصفحات المشهورة لخطوط الويب

قمت بتجربة مختلف صيغ الخطوط على أشهر المتصفحات وكتبت النتائج في الجدول التالي:



← مع الإشارة الى التالي:

• أعرضت عن الصيغة svg للأسباب التي ذكرتها في الفقرة السابقة.ومن أهمها الحجم الكبير.
• أعرضت عن الصيغة otf لكبر حجمها مقارنة بـ ttf ، ونحن في خطوط الويب نبحث عن الحجم الأقل!.
• النظام المحدث من ios لا يدعم خطوط الويب العربية ، بحثت عن حلول لم أجد ، حتى أني قمت باستخدام خطوط ويب عربية يوفرها موقع متخصص ولم تظهر !
• الصيغة woff أقل بكثير من ttf وتغني عنها غالباً ، وتدعهما كل المتصفحات المعروفه ، ويدعمها كذلك متصفح اندرويد الأشهر dolphine.
• الصيغة eot يدعمها حصرياً متصفح انترنت اكسبلورر بجيع اصداراته.
• مهم: قد تظن أنه يمكن الاستغناء عن الصيغة EOT لأننا لا نحتاجها عملياً إلا لدعم IE8، وهذا خطأ فمتصفح الانترنت اكسبلورر الثامن IE8 ما زال مهيمناً بشكل كبير في العالم العربي حسب الإحصائيات ، فحالياً ليس من الحكمة تجاهل مستخدمي IE8 وهم الأكثرية.وان قررت تجاهله فلا تضع تصويت حول قالب مدونتك !! .
• لمراقبة شهرة المتصفحات يمكنك الاستعانة بموقع: StatCounter

← والنتيجة:

• أرى أن أفضل وأشمل استخدام هو الجمع بين الصيغتين ( WOFF و EOT ) وان شئت أن تكون أكثر تحفظاً فلتكن الصيغة  TFF ثالثتهما ( EOT , WOFF , TFF )

رابعاً: أين أجد خطوط الويب المناسبة ؟

الخطوط أيها المبارك تماماً مثل البرامج فيها المجاني وفيها المدفوع ، أنا عن نفسي تفاجأت بأسعارها العالية ! ، تنتشر كثير من روابط الخطوط المقرصنة المشتهره، وخلال بحثي وجدت أن في الخطوط المجانية الكفاية. غالباً ستجد الخط متوفرة بالصيغة TTF أو OTF ، وبما أنها كالبرامج فالبحث عنها وايجادها سيكون باتباع الطرق المعتاده، مثلاً :

• البحث من خلال Google بكلمات ذات دلاله على خطوط الويب.
• التوجه الى المواقع المتخصصة بالخطوط العربية مثل: مكتبة الخطوط العربية ، مشروع الخط الأميري ، مشروع خط درويد نسخ ، أو درويد كوفي …. وهكذا
• ممكن الكشف عن خطوط الويب لموقع ما بالنظر في الكود المصدري للموقع.( لا أرى بأساً في ذلك طالما أن الخطوط التي فيها مجانية )

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

خامساً: أين أجد الصيغ الأخرى مثل eot و woff ؟

حسناً إذا وجدت الخط بصيغة ttf أو otf فهذا يكفي ، وسنستخدم أدوات وبرمجيات صغيرة للتحويل الى الصيغ الأخرى. وقبل أن نقوم بعملية التحويل يجب أن نتأكد من أن الخط ttf يعمل بشكل سليم على المتصفح كخط ويب؛ فأحياناً يظهر بحروف غير متصلة، والحل يكون يتحويل ttf إلى ttf ولكن الملف الناتج ورغم أنه بنفس الصيغة الا انه بمشيئة الله سيكون بحروف متصلة وسليمه. الآن سأعرض بعض المحولات التي جربتها ، مثل :

الأدوات:

• برنامج sfnt2woff : يحول الخط الى الصيغة woff ، مبرمج هذه الأداة هو ثالث مطوري صيغة woff من شركة موزيلا ؛ وبالتالي هذه الأداة فعالة جداً ، هناك نسخة لويندوز ، وأخرى للماك .
• برنامج eotfast : يحول الخط الى الصيغة eot بل ويقلل حجمها بشكل جيد جداً ، يعمل على ويندوز فقط .
• البرنامجان السابقان يعملان بنفس الطريقة، ضع البرنامج في مجلد بجوار ملف الخط المطلوب تحويله، ثم اسحب ملف الخط الى ايقونة البرنامج في ثانية سيظهر ملف جديد هو الخط بالصيغة المطلوبة.

المواقع:

• Free Font Converter : يحول بين مختلف صيغ الخطوط، الأداء ممتاز.
• Font2Web : يحول من صيغة ttf أو otf الى مجموعة صيغ مع ملفات تجريبيه للصيغ المحوله ، ان شئت تجربتها عليك أن تحرر العبارة اللاتينية الى أي عبارة باللغة العربية ( لأن الخط العربي قد لا يدعم الحروف اللاتينية ). يعيب هذا الموقع رغم سرعته العجيبة أنه يعطيك ملفات خطوط ذات حجم كبير نسبياً في بعض الأحيان !
• Onlie Font Converter : يحول بين مختلف الصيغ أداء جيد.
• ttf2eot : يحول من صيغة ttf إلى eot.
• Font Squirrel : أشهر موقع خطوط لعرض الخطوط ، بالإضافة الى خدمة تحويل صيغ الخطوط ، هو الأكثر استخداماً بلا منازع. بالنسبة للخطوط العربية لابد من اختيار التبويب “EXPERT” ثم وضع علامة عند الخيار “ No Subsetting “.

تنبيه:

• عند اعدادك خط ما لمدونتك فخذ وقتك ولا تستعجل، واستخدم كل المحولات السابقة وقارن بين أحجامها وتأكد من كون الخطوط المخرجة تعمل بشكل سليم. وبشكل عام فالأدوات أفضل من برمجيات المواقع حسب تجربتي ولكن أحياناً تختلف النتائج حسب الخط.

سادساً: أين أحفظ خطوط الويب الخاصة بمدونتي ؟

مثل ملفات الجافا وغيرها فإن ملفات خطوط الويب بحاجة للحفظ في موقع يوفر روابط مباشرة HotLink لربطها بالمدونة ، حسناً سأعيد كتابة أفضل ثلاثة مواقع يمكن الاعتماد عليها:

• Google Code : هو الأفضل  وسبق أن قمت بشرح كيفية استخدامه.
• Google Sites : سهل وبسيط يمكنك الاستزاده ومتابعة هذا الموضوع .
• DropBox : الموقع الرائع ان شئت اقرأ عنه من هنا . حقيقة لا يضاهيه موقع آخر حتى google drive !
• أي موقع آخر بشرط يوفر روابط مباشرة HotLink لجلبها وربطها في قالب مدونة بلوقر.

سابعاً: طريقة استخدام خطوط الويب في مدونات بلوقر

سنفترض الآن أننا لدينا خط ويب جميل للمدونة بثلاث صيغ ( TTF – WOFF – EOT ) ، ومرفوع على أحد المواقع. الآن سنستخدم CSS3 لتضمين هذا الخط الجميل في قالب المدونة ونعطيه اسماً ، وبهذا سيكون هذا الخط تحت رهن الإشارة لننسق به خطوط أي جزء من المدونة …

تضمين الخط في القالب:
في الجزء الخاص بأنماط المدونة أي CSS ، نبحث عن السطر :

]]></b:skin>

إذا كنت تستخدم قالب رسمي من بلوقر ستجد هذا السطر مختلف ويكون على هذا البناء:

]]> </b:template-skin>

ونكتب قبله الكود الذي يضمن الخط عبر الخاصية font-face :

@font-face {
font-family: 'demo';
src: url('http://domian.com/fonts/demo.eot');
src: url('http://domian.com/fonts/demo.eot?') format('embedded-opentype'),
url('http://domian.com/fonts/demo.woff') format('woff'),
url('http://domian.com/fonts/demo.ttf') format('truetype'); }

• لاحظ في السطر الثاني قمنا باعطاء الخط اسم مميز له وهو ( demo ) . طبعاً في التطبيق الحقيقي يفضل أن يكون اسم الخط مشتق من اسمه الأصلي.
• في السطر الثالث والرابع قمنا بتضمين رابط للخط بصيغة eot ، بالنسبة لتكرار كتابة رابط الخط وعلامة الاستفهام فهذه مجرد حيلة لتفادي ظهور خطأ في متصفح الاكسبلورر ، هناك حيل أخرى في كتابة هذا الكود ولكن هذه الطريقة هي آخر ما توصل اليه المحترفين لتفادي تعثر IE.
• السطر الخامس لصيغة woff والسادس لصيغة ttf.
• حافظ على هذا الترتيب ولا تغيره.
• لاحظ أننا في مدونات بلوقر سنكتب روابط الخطوط كاملة لأنها محفوظة في موقع آخر.
• إذا عندك أكثر من خط يمكنك كتابتها جميعاً بنفس الطريقة، أنصحك بعدم استخدام أكثر من خطين في المدونة لأن كثرة الخطوط تعني بطئ أكبر.

استخدام الخط:

قبل استخدام خط الويب الخاص بمدونتك، أفضل تنسيق خطوط المدونة بالخطوط الأساسية مثل arial أو tahoma وغيرها ، ثم بعد الانتهاء من ذلك قم بكتابة اسم خط الويب الخاص قبلها في الترتيب ؛ وهذا حتى في حال تعطل خط الويب لأي سبب يكون التنسيق الأساسي هو الذي يتحكم بمظهر المدونة. وبالتالي لو افترضت أني ساستخدم خط أساسي هو airal وخط ويب هو demo فسأكتب الخصائص كالتالي:

.post-body {   font-family: demo, Arial; }

ثامناً: مثال تطبيقي

حسناً سنحاول الآن اجراء تطبيق عملي لاستخدام خطوط درويد نسخ ودرويد كوفي ، وتحويلها ومن ثم تضمينها قالب المدونة :

• نزل خطوط درويد من موقع المشروع:  النسخ – الكوفي . الخطوط ستكون بصيغة TTF نحتاج تحويلها الى الصيغ الأخرى وان اتفقت معي فالأفضل نستخدم eot و woff .
• نستخدم الأداة ( eotfast ) لتحويل جميع الخطوط الى صيغة eot .
• نستخدم الأداة ( sfnt2woff ) لتحويل جميع الخطوط الى صيغة woff.
• الآن .. نجمع الخطوط في مجلد ولنسميه مثلاً webfont.
• ارفع المجلد بكافة الخطوط التي بداخله الى موقع dropbox . ( أو أي موقع آخر )
• هكذا تكون الخطوط جاهزه. يمكنك تنزيل الخطوط محولة من هنا .
• تضمين الخطوط في المدونة يبدأ باستخدام خاصية font-face وستكون كالتالي:

@font-face {
font-family: 'DroidKufi-Bold';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Bold.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Bold.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Bold.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Bold.ttf') format('truetype');}

@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}

@font-face {
font-family: 'DroidNaskh-Bold';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Bold.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Bold.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Bold.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Bold.ttf') format('truetype');}

@font-face {
font-family: 'DroidNaskh-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Regular.ttf') format('truetype');  }

• لاحط أنني كتبت روابط الخطوط كاملة ، ولاحظ كذلك أنني كتبت اسماء للخطوط تدل على اسم الخط الأصلي.
• الآن توجه لقالب مدونتك وانسخ اليه هذا الكود في جزء خصائص الأنماط css مثلاً قبيل هذا السطر مباشرة:

]]> </b:template-skin>

• استخدم أياً من الخطوط بدلاله اسمائها في أي مكان ( عنوان المدونة – وصف المدونة – عناوين القائمة الجانبية – عناوين الرسائل – التعليقات – بدن الرسائل ….. الخ )
• هذا مثال على مدونة تجريبيه : اضغط هنا .
• بهذه الطريقة ستظهر المدونة بخطوط ويب خاصة في جميع المتصفحات المعروفة إلا فيرفوكس! . نعم الا فيرفوكس للأسف وهذا ما سأبينه في الفقرة التالية . . .

تاسعاً: مشكلة خطوط الويب مع FireFox

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

←←  حسناً هناك بعض المناورات لتجاوز هذه العقبة ستكون بمشيئة الله مادة التدوينة القادمة ..

☼ تحديث:

لحل مشكلة متصفح الفيرفوكس راجع هذه التدوينة: مشكلة: متصفح الفيرفوكس مع خطوط الويب ..

.

.

تحاياي العاطرة :)