آخر المواضيع
جاري التحميل...
السبت، 22 يونيو، 2013

في
” أفضل الصدقة أن يتعلم المسلم علما ثم يعلمه أخاه المسلم ،،
هل زرت مواقع عربية مشهورة مثل موقع طريق الإسلام أو موقع عالم التقنية أو أي موقع عربي آخر وأعجبتك الخطوط التي تستعملها هذه المواقع ؟ لكن "لحظك التعيس" أنت تستعمل منصة بلوجر ولا توجد طريقة لتركيب خطوط مشابهة عليها ؟ حسنا في الواقع سبق للكثير أن يحاولوا إيجاد طريقة لسد هذه الثغرة وتمكين المدونين من استعمال خطوط خاصة لكن للأسف لم تنفع أي طريقة ;(( 


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

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

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

@font-face {
font-family: 'GESSTwoMediumRegular';
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot');
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot?') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.ttf') format('truetype'); }
الآن يتوجب علينا التركيز جيدا... سوف نبدأ بحذر شديد :)) 
أولا : نفتح أي محرر أكواد سواء كان النوتباد ++ أو النوتباد العادي وننسخ الكود التالي ونلصقه فيه: 

@font-face {
font-family: 'demo';
src: url(data:application/x-font-eot;charset=utf-8;base64,AAEA…);
src: url(data:application/x-font-eot;charset=utf-8;base64,AAEA…) format('embedded-opentype'),
url(data:application/x-font-woff;charset=utf-8;base64,AAEA…) format('woff'),
url(data:application/x-font-ttf;charset=utf-8;base64,AAEA…) format('truetype'); }
الآن نعوض كلمة demo باسم الخط، في هذا المثال الخط اسمه GESSTwoMediumRegular فنعوض الكلمة بهذا الاسم ليصير الكود هكذا

@font-face {
font-family: 'GESSTwoMediumRegular';
src: url(data:application/x-font-eot;charset=utf-8;base64,AAEA…);
src: url(data:application/x-font-eot;charset=utf-8;base64,AAEA…) format('embedded-opentype'),
url(data:application/x-font-woff;charset=utf-8;base64,AAEA…) format('woff'),
url(data:application/x-font-ttf;charset=utf-8;base64,AAEA…) format('truetype'); }
بعد ذلك نقوم برفع ملف الخط بصيغة eot المتوفر في السطر الثالث إلى هذا الموقع وسوف يعطينا كودا طويل جدا ننسخه ونعوض به AAEA… 
ونكرر العملية مع باقي الصيغ الأخرى وهي woff و ttf حيث نرفع ملفاتها إلى الموقع وننسخ الكود ونعوض به AAEA… وفي النهاية نتحصل على كود طويل ومعقد جدا مثل هذا.

اممم... هل تبدو العملية معقدة ؟ هل أنت جديد في هذا المجال ؟ هل تريد أكواد جاهزة ؟ :-? إذا كانت الإجابة نعم نمرّ إلى الطريقة الثانية والأسهل في هذا الموضوع.



وهو موقع تابع للمختبرات العربية ونضع فيه أفضل خطوط الويب العربية للاستعمال المباشر والطريقة سهلة جدا حيث تتمثل في الضغط على اسم الخط المراد استعماله ثم اتباع التعليمات الموجودة بالصفحة ومبروك عليك الخط الجديد.
لكن ماذا إن لم يكن الخط الذي تريده موجودا ؟ :-? 
الحل سهل جدا، إن كان هناك أي خط رأيته في أحد المواقع وتريد أن تمتلكه فضع اسمه أو رابط الموقع الذي يستعمله في تعليق على هذا الموضوع وسوف نعمل على طرحه في موقع خطوط الويب العربية في أسرع وقت :) . 

في النهاية أرجو أن تكونوا قد استفدتم من هذا الموضوع وإن واجهتم أي مشكلة فلا تتردوا في طرح مشاكلكم من خلال التعليقات أسفله. :>)

المحرر : عماد عادل
عماد عادل هو مدون يبلغ من العمر 14 سنة، يعيش في القيروان، تونس. مصمم ومدون ومؤسس المختبرات العربية، يحب نشر الأفكار الجديدة ويسعى إلى تطوير المحتوى العربي الهزيل. الملف الشخصي
تابعه على : فيس بوك | تويتر | جوجل بلس | بنترست | دفيان آرت | يوتيوب | الموقع.
” أفضل الصدقة أن يتعلم المسلم علما ثم يعلمه أخاه المسلم ،،

0 تعليقات:

إرسال تعليق