الخطوط العربية لها العديد من الطرق لرسمها والتفنن بها . واحد الأسباب الرئيسة لقدرة الخطاط على إخراج لوحة فنية من هذه الخطوط هو اتصالها ببعضها وللخطوط العربية أنواع عدة ابتداء بالخط الكوفي فالرقعة والمثلث والديواني الخ...
في تصميم المواقع الالكترونية يرغب المصمم بإدخال جمالية الخط العربي على تصميمه وهنا يبدأ بمواجهة العقبات والتي هي موضوعنا في هذه المشاركة لكن دعونا نتطرق إلى أهمية الخط الذي يستخدم في محتوى الموقع الالكتروني أولا.
هناك بعض أنواع الخطوط لا تستطيع عرضها جميع متصفحات الانترنت مثل 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)
CSS IMPORT URL: http://fonts.googleapis.com/earlyaccess/thabit.css
الخط الأميري (Amiri)
CSS IMPORT URL: http://fonts.googleapis.com/css?family=Amiri&subset=arabic,latin
الخط الكوفي (Droid Arabic Kufi)
CSS IMPORT URL: http://fonts.googleapis.com/earlyaccess/droidarabickufi.css
خط النسخ (Droid Arabic Naskh)
CSS IMPORT URL: http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css
الخط اللطيف (Lateef)
CSS IMPORT URL: http://fonts.googleapis.com/css?family=Lateef&subset=arabic,latin
خط شهرزاد (Scheherazade)
CSS IMPORT URL: http://fonts.googleapis.com/css?family=Scheherazade&subset=arabic,latin