دروس اكاديمية

09/11/2012 12:15:02

جنة التايبوغرافيا...عالمٌ خفي يقع خلف الكيبورد! خطوط الويب الجزء 4

جنة التايبوغرافيا...عالمٌ خفي يقع خلف الكيبورد! خطوط الويب الجزء4

 

Web Fonts

جميع أنظمة تشغيل الحواسب المكتبية في العالم تأتي مجهزةً بمجموعة من الخطوط بشكل افتراضي يستخدمها النظام و إلا لما استطعنا رؤية كلمة واحدة في أي نظام تشغيل, هناك مجموعة من الخطوط تسمىWeb Safe Fonts و هي عبارة عن خطوط موجودة على كافة الأنظمة و بالتالي فإن استخدامك لأحد هذه الخطوط في موقع ويب سيضمن لك ظهور موقعك بنفس المظهر تماما ً على أي جهاز في العالم تقريبا ً لأن الخط موجود لدى الجميع, تلك الخطوط على الرغم من فائدتها إلا أنها خطوط سيئة جدا ً جدا ً من وجهة نظر فنية و تصميمية و وضعت لغرض الاستخدام من قبل نظام التشغيل في احتياجاته من برامج و قوائم و ما إلى ذلك. يمكنك أن تكون قنوعا ً و تحصر اختيارك بهذه الخطوط فقط و سأضمن لك أن تصميمك سيكون سيئا ً! أو يمكنك أن تنتقل بتصاميم صفحاتك نحو مستوى من الجمالية التايبوغرافية عبر استخدام ما يعرف بـ Web Fonts أو خطوط الويب.

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

لتطبيق هذه التقنية يحدد المصمم الخط المطلوب و من ثم يقوم بتحويله إلى خط ويب, و من ثم يدخله ضمن الصفحة بواسطة كود خاص, هذا الكود المسؤول عن إدراج خط داخل صفحة ويب هو كود CSS يسمى @font-face, إذا أردت تعلم المزيد عن هذه التقنية فكل ما عليك فعله هو البحث عن عبارة @font-face في google و ستجد عشرات الدروس و الأمثلة الوافية عنها. عملية تحويل خط ما من خط عادي إلى خط ويب تقوم بتوليد خط يصلح للاستخدام على الويب له لاحقة مخصصة, هناك عدة لواحق للخطوط المستخدمة في الويب و لكن النوع المعتمد منها هو اللاحقة woff, عملية التحويل هذه يمكن أن تتم بواسطة برامج خاصة أو مواقع ويب تقدم خدمة التحويل و ما أكثر تلك المواقع!

 

هناك بعض المواقع التي تقدم خدمة الـ Web Fonts بشكل مأجور عبر استضافة الخطوط على سيرفراتها و إتاحتها للاستخدام من قبل المصممين, تؤمن مثل هذه الشركات مكتبات ضخمة من الخطوط ليختار منها المصمم ما يناسبه, و من ثم يقوم بربط الخط المطلوب مع موقعه. يعتبر هذا النوع من الخدمات شائعاً جداً و يتيح إمكانيات كبيرة لاستخدام خطوط باهظة الثمن و احترافية بأجور زهيدة تتراوح ما بين بضعة دولارات حتى الـ 100 دولار, لأجل ذلك نجد المصممين المحترفين يفضلون استخدام مثل هذه الخدمات بدلا ً من شراء الخطوط و التحويل ما بين الأنواع المختلفة بأنفسهم.

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

 

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