خط درويد الخارجي العربي للاستخدام في مواقع الانترنت متوافق مع كافة المتصفحات css3
لعل الكثير منا مل استخدام الخطوط الافتراضية في مواقع الانترنت
مثل خط أريال arial ( هذا النص مكتوب بخط أريال) وخط تاهوما tahoma (هذا النص مكتوب بخط تاهوما)
وفي السابق كنا إذا أردنا أن نستعمل خطوط أخرى فإنه علينا تضمين النص كصورة وليس نص
وهذا بالتأكيد ليس حلاً عملياً إذا إن الصور ذات حجم كبير في حال كثرت النصوص كما أننا لا نستفيد من أرشفتها في محركات البحث
ولكن ظهر حديثاً مجموعة من الخطوط الخارجية التي يمكن استخدامها في مواقع الانترنت وهي خطوط رائعة وسأطرح اليوم بعض الأمثلة
سأشرح بشكل مفصل خط اسمه
مثال على الخط:
الخط المعتمد حالياً بالمنتدى في ستايل أخضر أزرق كله بنفس الخط
طريقة الاستخدام: الطريقة الأسهل هي تضمين ملف css الخاص بالخط من موقع جوجل الذي يقدم لنا هذه الخدمة مجاناً
ويكود كود ملف html كاملاً كما يلي:
يمكنك تجريب الكود السابق في ملف Html بعد إنشائه على جهاز الكمبيوتر عندك ومن ثم نسخ الكود ولصقه فيه وبعد فتحه تجد النتيجة كما في الصورة أعلاه
أو انسخ الكود والصقه في محرر أكواد html الخاص بموقع طه سوفت على هذا الرابط
HTML محرر أكواد
الشرح:
أهم ما في الكود السابق السطرين التاليين
ويعني استخدام ملف css ذو الرابط
http://fonts.googleapis.com/earlyaccess/droidarabickufi.css
وهو الملف المسؤول عن توليد الخط
السطر:
وهو يعني استخدام الخط Droid Arabic Kufi للفقرات (أي كافة الوسوم من نوع p ) في صفحة الانترنت الخاصة بنا
الخط الآخر serif هو خط بديل في حال عدم توفر الأول
الطريقة الثانية للاستخدام:
هي تضمين ملفات الخط وملفات css بشكل فعلي على موقعنا
وأنا أفضل ذلك لكي نضمن سلامة تحميل الملفات والخطوط من موقعنا
ومصدر الخط السابق هو الرابط التالي:
Google Web Fonts : Early Access
وهو مقدم من شركة جوجل كما ذكرنا
والآن بدلاً من تضمين روابط جوجل
يمكننا إنشاء ملف css وليكن اسمه style.css
ونضع فيه الكود التالي:
واعتبرناهم موجودين على موقعنا في مجلد اسمه 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 م ب
ولن تظهر الخطوط في الموقع حتى يتم تحميل هذا الحجم
فإذا استخدمنا مثلاً أربعة خطوط لك أن تتخيل كم سيصبح موقعك بطيئاً
ملاحظة: تم اعتماد هذا الخط في منتدى طه سوفت للبرامج في ستايل أخضر أزرق الافتراضي
مثل خط أريال 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 م ب
ولن تظهر الخطوط في الموقع حتى يتم تحميل هذا الحجم
فإذا استخدمنا مثلاً أربعة خطوط لك أن تتخيل كم سيصبح موقعك بطيئاً
ملاحظة: تم اعتماد هذا الخط في منتدى طه سوفت للبرامج في ستايل أخضر أزرق الافتراضي
هل هي صعبة ام اغير نسخة المنتدى ومن الجيل الرابع الى الثالث؟
وهل استطيع ان تبقى النسخة كما هي فقط تغير خط المنتدى على كامل اجزاءه؟
http://www.awladdz.net/vb/
ضع الكود الأول في قالب headinclude
والكود الثاني في قالب additional.css
افتح لوحة تحكم المنتدى ثم الستايلات والقوالب - ثم التحكم بالستايلات - ثم اضغط على زر اذهب بجانب الستايل الذي تستعمله
الآن في قالب headinclude أضف في بدايته:
انزل إلى الأسفل بنفس الصفحة تجد
تعاريف CSS الإضافية/Additional CSS Definitions
أضف فيه:
فيتم تطبيق الخط على كامل المنتدى
انزل إلى آخر الصفحة واضغط حفظ
لكن في الحقيقية ستكون بعض الأجزاء ذات منظر غير مريح مع هذا الخط
لذلك في منتدى طه سوفت احتجت تخصيصات كثيرة جداً حتى يتناسب الخط مع المنتدى
بكل الأحوال جرب
يعني لو تعطيني طريقة لتركيب
هذا مجلد فيه مثال عن طريقة استعمال الخط مع ملفات الخطوط
إذا كنت على دراية بلغة html , css فأكيد بس تفتح المجلد وتقرأ محتوى الملفات رح يكون كل شي واضح
تم اعتماذ هذا الخط في أجزاء كبيرة من المنتدى