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

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

إذاً كيف يمكنك إستخدام خطوط عربيّه/إنجليزيه غير أساسيّه على موقعك الإلكتروني؟ و في نفس الوقت توفير نفس التجربه للمستخدم من خلال متصفحات الإنترنت المختلفه؟

السر يكمن في وسم‮‭CSS ‬ يدعى  ‮‭@font-face ‬ و الذي تم تقديمه منذ وقت طويل في النسخه الثانيه من ‮‭CSS‬، لكن لم تكن معظم المتصفحات تدعمه حتى آخر ‮‭2008‬ . عند إستخد‬ام الوسم يمكنك ربط إسم حزمة الخط بالملف الفعلي لأي خط تريد أن تستعمله على موقعك.

مثال خطوه بخطوه

إضغط الصوره أعلاه لتراها مكبّره

1. أحصل على مستند الخط سواءاً كان ‮‭ttf‬ أو ‮‭otf‬: لمستخدمي ويندوز يمكنك الذهاب إلى  ‮‭"Control Panel > Fonts"‬ ثم إنسخ الخط الذي تريده على سطح المكتب الخاص بك.
2. إذهب إلى الرابط ‮‭http://www.fontsquirrel.com/tools/webfont-generator‬، يقدم هذا الموقع خدمة صنع طقم خاص بإستخدام الخط على شبكة الإنترنت حيث يحتوي هذا الطقم على إمتدادات الملفات المختلفه المستخدمه من قبل المتصفحات المختلفه. يمكنك الآن تحميل مستند الخط من سطح مكتبك لكي تحوّله إلى طقم الخط الخاص بالويب.
3. للخطوط العربيه أوصي بعدم إختيار خيار ‮‭Subsetting‬ هذا الخيار يقوم بإختيار  مجال الحروف المستخدمه حسب اللغه. اللغه العربيه ليست مدّعمه من هذه الناحيه. الخيارات الموضحه في الصوره أدناه ستعمل بالتأكيد مع أي خطوط من أي لغه. لكنّها لن تعطيك النتيجه المثلى . لذا أوصيك بأن تحاول تجربة تأثير الخيارات المختلفه لفهم أعمق.
   
4.  الآن يمكنك نسخ هذه الملفات إلى موقعك  إلى نفس الملف الذي يحتوي مستند ال ‮‭CSS‬ الخاص بموقعك. كما يجب عليك إضافة التالي إلى مستند ‮‭CSS ‬:

@font-face{
    font-family:'GE_SS';/* this is the font name you want to use when applying this font to any element using font-family*/
    src: url('ge_ss_two_medium.eot');
    src: url('ge_ss_two_medium.eot?#iefix') format('embedded-opentype'), 
    url('ge_ss_two_medium.woff') format('woff'), 
    url('ge_ss_two_medium.ttf') format('truetype'), 
    url('ge_ss_two_medium.svg#ge_ss') format('svg');
    font-weight: normal;
    font-style:normal;
}

h1{
font-family:GE_SS,Tahoma,Arial;
}

لمستخدمي ‮‭ IIS‬

إذا كنت تستخدم ‮‭IIS7‬ يجب عليك التأكد من أنه تم تعريف خادم الويب ليقوم بتقديم الملفات للإمتدادات التاليه

extension: .eot      mime-type: application/vnd.ms-fontobject
extension: .otf       mime-type: application/x-font-otf
extension: .svg      mime-type: image/svg+xml
extension: .woff    mime-type: application/x-font-woff
extension: .ttf        mime-type: application/x-font-ttf

ملحوظه أخيره

إذا كنت تحفظ مستندات الخطوط على إسم نطاق مختلف عمّا تستخدمه لموقعك الإلكتروني(مثال: الموقع ‮‭www.mywebsite.com‬ و مستندات الخط من ‮‭fonts.adobe.com‬) يجب أن تتأكّد من تفعيل تقديم الملفات من نطاقات مختلفه بإستخدام  الترويسه ‮‭  ("Access-Control-Allow-Origin:*") 

هل لديك أسئله، هل تحتاج للمساعدة في إستخدام خطوط غير أساسيّه في موقعك، أترك تعليقاتك في الصندوق أدناه

مزاجي عصفوري

يمكنك الآن شراء إشتراك‮‭ "Adobe Creative Cloud" ‬ لمدة سنه بقيمة 0012 درهم إماراتي. يمكنك الإتصال بأي من باعة التجزئه من خلال زيارة الرابط أدناه‮:

http://www.adobe.com/mena_en/products/creativecloud/contact.html

لقد قمت بشراء إشتراك لإستخدامي الخاص، و أردت تجربتي مهاراتي التي لم أستخدمها منذ فتره، و الصوره أعلاه هي النتيجه‮.

5 أخطاء قاتله تقع بها الشركات الناشئه

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

1. صرف الكثير من الوقت و الجهد على النسخه الأوّليه (التجريبيه) للمنتج أو الخدمه. إن المنتجات و الخدمات على شبكة الإنترنت بحاجه للمرور في مرحله تجريبيه تستمع بها جيّداً لإنطباعات و مشاعر زبائنك إتجاه الخدمه التي تقدّمها. و كل ما تقوم به من تطوير للمنتج بدون إعتبار إنطباعات المستخدمين هو عباره عن تخمين ليس إلاّ. مّما ينقلنا للنقطة الثانيه
2. عدم توفير قنوات متعدّده للمستخدمين لتوفير أرائهم و إنطباعاتهم، إن توفير صفحه للزبائن لإرسال أرائهم لم يعد كافياً لإستقطاب عدد كافي من آراء المستخدمين
3. الإفراط في التفاؤل عند تقدير الأرباح، إن الأرباح التي تجنيها من خلال الخدمات التي تقدّمها عبر الإنترنت متّصله إتصالاً وثيقاً بعدد الزوار الذي يتلقّاه موقعك. و بما أن عدد الزوار الذي يمكنك أن تجذبه عبر محركات البحث يحتاج إلى بعض الوقت لكي ينمو، فأنت تحتاج إلى وقت مماثل لبناء الأرباح و وقت إضافي آخر لضبط و تحسين الخدمه بما يلائم رغبات و حاجات الزوّار و المستخدمين. هذا الخطأ على الأغلب يؤدي إلى مشاكل في السيوله الماديّه
4. الإعتماد المفرط على شركات خارجيه في بناء أو تصميم خدمتك الإلكترونيه. إن كل نموذج عمل على شبكة الإنترنت متميّز و فريد من نوعه و يحتاج إلى كثير من الوقت و الجهد لفهم تفاصيله. فلا تتصوّر أنّ شركات الإستشارات قادره على حل جميع مشاكلك. و إن كنت محتاجاً إلى مساعدة في تطوير جانب من جوانب الخدمه التي تقدّمها كن جاهزاً لكي تكن المحرّك و المتحكّم في تفاصيل هذه التطويرات
5. البدء ببنيه تحتيّه لتكنولوجيا المعلومات ضخمه (ذات كلفه عاليه) أو فريق عمل ضخم لدعم الخدمه.  على الرغم من أن قدرة منتجك و أطر العمل على التوسّع لخدمة العدد المتزايد من متلقّي الخدمه هي عامل مهم لنجاحك، إلّا أن حرصك على إبقاء أنظمتك و عدد موظفينك بحيث لا تزيد عن الحد الأدنى اللازم لدعم المنتج و تقديم خدمه مرضيه أكثر أهميّه. أن تحتاج لأن تبني منظومة عمل بكلفه منخفضه لكي تصمد في المرحلة التجريبيّه و حالما تجد المنظومه الناجحه التي ترضي مستخدميك و تدّر الأرباح الكافيه تستطيع التوسّع في هذه المجالات تدريجياً بما يناسب الزياده في الأرباح.

أنا متأكّد من أن هناك المزيد من الأخطاء التي ترتكبها الشركات الناشئه، لكن قد حاولت من خلال هذه المقاله ذكر الأسباب التي أظن  أنّها أكثر شيوعاً مستنداً على خبرتي المتواضعه في المجال في حدود المنطقه التي أعمل بها

هل لديك إستفسار ، أو تخالفني الرأي في أي من النقاط المذكوره. أرجو أن تشاركنا بتعليقاتك و أرائك القيّمه