الخطوط العربية الصالحة في تصميم مواقع الكترونية

الخطوط العربية لها العديد من الطرق لرسمها والتفنن بها . واحد الأسباب الرئيسة لقدرة الخطاط على إخراج لوحة فنية من هذه الخطوط هو اتصالها ببعضها وللخطوط العربية أنواع عدة ابتداء بالخط الكوفي فالرقعة والمثلث والديواني الخ...
في تصميم المواقع الالكترونية يرغب المصمم بإدخال جمالية الخط العربي على تصميمه وهنا يبدأ بمواجهة العقبات والتي هي موضوعنا في هذه المشاركة لكن دعونا نتطرق إلى أهمية الخط الذي يستخدم في محتوى الموقع الالكتروني أولا.
هناك بعض أنواع الخطوط لا تستطيع عرضها جميع متصفحات الانترنت مثل google, Firefox  وهذا ما لا يتمناه احد. مشكلة أخرى قد تواجهها وهي أن الخط الذي تريده يحتاج إلى رفع الملفات الخاصة به وتحميلها على المتصفح وهذا يؤدي الى بطئ في تحميل المحتوى. كما أن المتصفح قد يتأخر ثانية الى ثانيتين في رسم صفحة الخط المعروض وذلك لان المتصفح يحتاج إلى معالجة ملفات الخطوط المحملة اولا. ناهيك عن الفشل في رفع وتحميل ملفات الخط على  بعض متصفحات الانترنت.
بشكل عام هناك طريقتان لاستخدام الخطوط الغير أساسية: الأولى تحدثنا عنها سابقا وهي إضافة ملفات جديدة للخط الذي تريد ان تستخدمه font-face CSS directive والطريقة الثانية هي تحويل الخط باستخدام أدوات معينة إلى صورة بحيث تستبدل جميع المحتوى المكتوب بصور لهذه الخطوط لحظة تحميل الصفحة. هذه الطريقة لا ننصح بها أبدا ك web design experts لأنها تعمل على زيادة وقت تحميل الصفحة بالإضافة إلى أن المستخدم لا يستطيع نسخ اي كلمة موجودة. والصور قد لا تكون مرتبة 100% فالمستخدم يستطيع ان يشعر بذلك بسهولة وهذا ما يسمى ب text alignment.
Web safe  هي أنواع الخطوط القابلة للاستخدام والعرض على جميع متصفحات الانترنت دون تحميل أي ملفات إضافية. في اللغة الانجليزية يبلغ عددها تسعة خطوط أما باللغة العربية ثلاثا فقط وهم:
1. Arial
2. Tahoma
3. Courier New

خلاصة الأمر أنه إذا أردت استخدام non standard fonts فاستخدم تلك الخطوط الموجودة في Google Fonts API الموجودة في الرابط ادناه.
http://www.google.com/fonts
علما بأن google  لم تضف خطوط اللغة العربية رسميا على  Google Fonts API فيفضل استخدام Early Access التجريبي الموجود في الرابط أدناه.
http://www.google.com/fonts/earlyaccess.
وفيما يلي الخطوط المتوفرة:

 

الخط الثابت (Thabit)

Thabit Google Arabic Fonts example

CSS IMPORT URL: http://fonts.googleapis.com/earlyaccess/thabit.css

 

الخط الأميري (Amiri)

Amiri Google Arabic Fonts example

CSS IMPORT URL: http://fonts.googleapis.com/css?family=Amiri&subset=arabic,latin

 

الخط الكوفي (Droid Arabic Kufi)

Droid Arabic Kufi Google Arabic Fonts example

CSS IMPORT URL: http://fonts.googleapis.com/earlyaccess/droidarabickufi.css

 

خط النسخ (Droid Arabic Naskh)

Droid Arabic Naskh Google Arabic Fonts example

CSS IMPORT URL: http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css

 

الخط اللطيف (Lateef)

Lateef Google Arabic Fonts example

CSS IMPORT URL: http://fonts.googleapis.com/css?family=Lateef&subset=arabic,latin

 

خط شهرزاد (Scheherazade)

Scheherazade Google Arabic Fonts example

CSS IMPORT URL: http://fonts.googleapis.com/css?family=Scheherazade&subset=arabic,latin