زهير طه

77

12,670

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

لعل الكثير منا مل استخدام الخطوط الافتراضية في مواقع الانترنت
مثل خط أريال arial ( هذا النص مكتوب بخط أريال) وخط تاهوما tahoma (هذا النص مكتوب بخط تاهوما)
وفي السابق كنا إذا أردنا أن نستعمل خطوط أخرى فإنه علينا تضمين النص كصورة وليس نص
وهذا بالتأكيد ليس حلاً عملياً إذا إن الصور ذات حجم كبير في حال كثرت النصوص كما أننا لا نستفيد من أرشفتها في محركات البحث
ولكن ظهر حديثاً مجموعة من الخطوط الخارجية التي يمكن استخدامها في مواقع الانترنت وهي خطوط رائعة وسأطرح اليوم بعض الأمثلة
سأشرح بشكل مفصل خط اسمه

( خط درويد الكوفي )


مثال على الخط:

الخط المعتمد حالياً بالمنتدى في ستايل أخضر أزرق كله بنفس الخط
طريقة الاستخدام: الطريقة الأسهل هي تضمين ملف css الخاص بالخط من موقع جوجل الذي يقدم لنا هذه الخدمة مجاناً
ويكود كود ملف html كاملاً كما يلي:




خط خارجي - طه سوفت





خط درويد الكوفي خط خارجي


منتدى طه سوفت للبرامج




خط درويد الكوفي خط خارجي


منتدى طه سوفت للبرامج





>
يمكنك تجريب الكود السابق في ملف Html بعد إنشائه على جهاز الكمبيوتر عندك ومن ثم نسخ الكود ولصقه فيه وبعد فتحه تجد النتيجة كما في الصورة أعلاه
أو انسخ الكود والصقه في محرر أكواد html الخاص بموقع طه سوفت على هذا الرابط
HTML محرر أكواد

الشرح:
أهم ما في الكود السابق السطرين التاليين
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
وهو ملون بالأزراق في الكود السابق الكامل
ويعني استخدام ملف css ذو الرابط
http://fonts.googleapis.com/earlyaccess/droidarabickufi.css
وهو الملف المسؤول عن توليد الخط

السطر:
font-family: 'Droid Arabic Kufi', serif;
ملون بالأخضر في الكود الكامل
وهو يعني استخدام الخط Droid Arabic Kufi للفقرات (أي كافة الوسوم من نوع p ) في صفحة الانترنت الخاصة بنا
الخط الآخر serif هو خط بديل في حال عدم توفر الأول

الطريقة الثانية للاستخدام:
هي تضمين ملفات الخط وملفات css بشكل فعلي على موقعنا
وأنا أفضل ذلك لكي نضمن سلامة تحميل الملفات والخطوط من موقعنا
ومصدر الخط السابق هو الرابط التالي:
Google Web Fonts : Early Access
وهو مقدم من شركة جوجل كما ذكرنا
والآن بدلاً من تضمين روابط جوجل
يمكننا إنشاء ملف css وليكن اسمه style.css
ونضع فيه الكود التالي:
/* 
* Droid Arabic Kufi (Arabic) http://www.tahasoft.com
*/
@font-face {
font-family: 'Droid Arabic Kufi';
font-style: normal;
font-weight: 400;
src: url(fonts/DroidKufi-Regular.eot);
src: url(fonts/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
url(fonts/DroidKufi-Regular.woff2) format('x-woff2'),
url(fonts/DroidKufi-Regular.woff) format('woff'),
url(fonts/DroidKufi-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Droid Arabic Kufi';
font-style: normal;
font-weight: 700;
src: url(fonts/DroidKufi-Bold.eot);
src: url(fonts/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
url(fonts/DroidKufi-Bold.woff2) format('x-woff2'),
url(fonts/DroidKufi-Bold.woff) format('woff'),
url(fonts/DroidKufi-Bold.ttf) format('truetype');
}
وهو نفس الكود للملف الذي كنا نستورده من جوجل بالطريقة الأولى ولكن غيرنا مسارات ملفات الخطوط
واعتبرناهم موجودين على موقعنا في مجلد اسمه fonts

والآن نقوم بإنشاء مجلد اسمه fonts بجانب ملف style.css ونضع فيه كافة ملفات الخطوط
من أين حصلنا على ملفات الخطوط؟
قمنا بتحميل كل ملف على حده من الملف الأصلي css الذي كنا نستورده في الخطوة السابقة
حيث إن مساره هو
http://fonts.googleapis.com/earlyaccess/droidarabickufi.css
ادخل إلى الرابط فتجد فيه روابط لملفات الخطوط
قم بتحميل كل منها على حده
والآن ننشئ ملف index.html بجانب ملف style.css ومجلد fonts
ونكتب فيه الكود التالي:



خط خارجي - طه سوفت





خط درويد الكوفي خط خارجي


منتدى طه سوفت للبرامج




خط درويد الكوفي خط خارجي


منتدى طه سوفت للبرامج





ستتضح الخطوات السابقة أكثر بعد تحميل المثال كاملاً من الرابط التالي:
font_tahasoft.com.zip

انتهى الشرح
ملاحظات أخرى:
يمكنك استخدام كافة الخطوط العربية المكتوب بجانبها كلمة arabic
والموجودة على الرابط التالي:
Google Web Fonts : Early Access
بنفس الطريقة المشروحة أعلاه

مثال على موقع عربي يستخدم خط درويد الكوفي الذي تم شرحه
أندرويد | أردرويد | هواتف أندرويد | تطبيقات أندرويد | ألعاب أندرويد | تعريب أندرويد | حواسب لوحية | Ardroid
مواقع أخرى عربية تستخدم خطوط خارجية:
أفضل المواقع التي تستخدم خطوط عربية مميزة
- طبعاً لا ننسى أنه بالإمكان استخدام أي من الخطوط هذه في المنتديات والمدونات والمواقع بكافة أنواعها
ولكن يجب أن نكثر منهم حتى لا يثقل الموقع إذ إن حجم ملفات خط درويد الكوفي مثلاً 369 م ب
ولن تظهر الخطوط في الموقع حتى يتم تحميل هذا الحجم
فإذا استخدمنا مثلاً أربعة خطوط لك أن تتخيل كم سيصبح موقعك بطيئاً



ملاحظة: تم اعتماد هذا الخط في منتدى طه سوفت للبرامج في ستايل أخضر أزرق الافتراضي

التعليقات (12)

youcef xps     
نعم صحيح لكن كيف يكون التعديل اخي
M.nshawaty     
خط رائع لكن يلزمه تعديلات في الموقع ليتناسب مع الحجم
youcef xps     
وكيف تكون اعادة بناء المنتدى؟
هل هي صعبة ام اغير نسخة المنتدى ومن الجيل الرابع الى الثالث؟
وهل استطيع ان تبقى النسخة كما هي فقط تغير خط المنتدى على كامل اجزاءه؟
http://www.awladdz.net/vb/
زهير طه     
يبدو أن الخط غير مستخدم في منتداك, بكل الأحوال يحتاج إعادة بناء لأجزاء كبيرة من الستايل وتقريباً تصميم من جديد في حال أردت التطبيق على كامل المنتدى
youcef xps     
لكن الكتابة في navbar فيها سطرين يعني الكتابة غير متناسقة
زهير طه     
للجيل الرابع
ضع الكود الأول في قالب headinclude
والكود الثاني في قالب additional.css
youcef xps     
اخي انا عندي نسخة منتدى 4.1.9
زهير طه     
الأخ يوسف إذا كان منتداك جيل ثالث اعمل الآتي
افتح لوحة تحكم المنتدى ثم الستايلات والقوالب - ثم التحكم بالستايلات - ثم اضغط على زر اذهب بجانب الستايل الذي تستعمله
الآن في قالب headinclude أضف في بدايته:
انزل إلى الأسفل بنفس الصفحة تجد
تعاريف CSS الإضافية/Additional CSS Definitions
أضف فيه:
*{font-family: 'Droid Arabic Kufi' !important;}
فيتم تطبيق الخط على كامل المنتدى
انزل إلى آخر الصفحة واضغط حفظ
لكن في الحقيقية ستكون بعض الأجزاء ذات منظر غير مريح مع هذا الخط
لذلك في منتدى طه سوفت احتجت تخصيصات كثيرة جداً حتى يتناسب الخط مع المنتدى
بكل الأحوال جرب
youcef xps     
والله ياخي ليست لي خبرة كبيرة في هذا المجال
يعني لو تعطيني طريقة لتركيب
زهير طه     
اخي زهير اين اضع محتوى ملف font_tahasoft.com


هذا مجلد فيه مثال عن طريقة استعمال الخط مع ملفات الخطوط
إذا كنت على دراية بلغة html , css فأكيد بس تفتح المجلد وتقرأ محتوى الملفات رح يكون كل شي واضح
youcef xps     
اخي زهير اين اضع محتوى ملف font_tahasoft.com
زهير طه     
ملاحظة:
تم اعتماذ هذا الخط في أجزاء كبيرة من المنتدى