31‏/12‏/2015

“الهندسة يمكنها أن تصنع حرف مقروء، لكن الفن وحده يستطيع جعل الحروف جميلة، فالفن يبدأ حيث انتهت الهندسة، و يضفي على الحروف شخصية تتخطى مجرد كونها أشكالا هندسية” – بول ستاندرد

يعتبر نوع الخط المستخدم في التصميم من الأساسيات لجمال شكل التصميم، لا يستطيع أي مصمم سواء كان مصمم ويب أو مصمم جرافيك أو حتى مصمم ملابس أن يتجاهل أو ينكر قيمة الشكل الجمالي للخطوط المحتوى مؤلف من نصوص منسقة والخطوط هي أحد أهم العوامل المساعدة في صياغة هذا التنسيق.

سندع الأمور المبهمة ونتلكم بلغة بسيطة، لكل خط حجم، ويؤثر هذا الحجم على سرعة تحميل صفحة الموقع ومن هنا نجد أنه علينا استخدام خطوط خفيفة تسرع من عملية تحميل الصفحة.

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

تعريف خطوط جوجل :
باختصار هي مجموعة من الخطوط المستضافة على سيرفرات Google، متاحة للاستخدام المباشر داخل ملفات Css عن طريق @import، تتميز بالثبات العالي والسرعة في التحميل، بالإضافة لتنوع الخطوط المدعومة والتي تصل لأكثر من 600 خط، ومن بينها خطوط تدعم اللغة العربي.

المميزات :

  • سرعة تحميل الخط
  • عدم حذف الخط المستضاف
  • توافق الخط مع جميع الاجهزة
  • خيارات التحكم بالخط
  • متوافق مع أي موقع

الآن قبل أن نتطرق لطريقة التركيب سأعرض عليكم قائمة أفضل الخطوط بأشكالها مرفقة مع أكوادها

Noto Sans Kufi Arabic
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
font-family: 'Noto Sans Kufi Arabic', sans-serif;

الخط الأميري
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/amiri.css);
font-family: 'Amiri', serif;

Droid Arabic Naskh
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css)
font-family: 'Droid Arabic Naskh' , serif;

خط ثابت
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/thabit.css);
font-family: 'Thabit', serif;

خط شهرزاد
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/scheherazade.css);
font-family: 'Scheherazade', serif;

Noto Naskh Arabic UI
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/notonaskharabicui.css);
font-family: 'Noto Naskh Arabic UI', serif;
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2.ابحث بإستعمال CTRL+F عن  ]]></b:skin> ثم ضع كود الخط الذي تريد فوقه فقط المحدد بالأحمر
3. طريقة الاستخدام في داخل التصميم تكون عن طريق اضافة كود اسم الخط مثال : font-family: 'Amiri', serif; في القسم المراد تطبيق عليه الخط
هنا ننتهي مع الخطوط العربية التي تدعم التضمين في صفحات الويب، للمزيد من الخطوط سواء عربية أو أجنبية ندعوكم بزيارة خطوط جوجل
في حال كان لديك أي تسائل وتريد تطبيق الخط فقط اترك تعليق يوضح سؤالك، ولا تنسى أن تدعمنا بمشاركة التدوينة إذا نالت إعجابك
“الهندسة يمكنها أن تصنع حرف مقروء، لكن الفن وحده يستطيع جعل الحروف جميلة، فالفن يبدأ حيث انتهت الهندسة، و يضفي على الحروف شخصية تتخطى مجرد كونها أشكالا هندسية” – بول ستاندرد

يعتبر نوع الخط المستخدم في التصميم من الأساسيات لجمال شكل التصميم، لا يستطيع أي مصمم سواء كان مصمم ويب أو مصمم جرافيك أو حتى مصمم ملابس أن يتجاهل أو ينكر قيمة الشكل الجمالي للخطوط المحتوى مؤلف من نصوص منسقة والخطوط هي أحد أهم العوامل المساعدة في صياغة هذا التنسيق.

سندع الأمور المبهمة ونتلكم بلغة بسيطة، لكل خط حجم، ويؤثر هذا الحجم على سرعة تحميل صفحة الموقع ومن هنا نجد أنه علينا استخدام خطوط خفيفة تسرع من عملية تحميل الصفحة.

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

تعريف خطوط جوجل :
باختصار هي مجموعة من الخطوط المستضافة على سيرفرات Google، متاحة للاستخدام المباشر داخل ملفات Css عن طريق @import، تتميز بالثبات العالي والسرعة في التحميل، بالإضافة لتنوع الخطوط المدعومة والتي تصل لأكثر من 600 خط، ومن بينها خطوط تدعم اللغة العربي.

المميزات :

  • سرعة تحميل الخط
  • عدم حذف الخط المستضاف
  • توافق الخط مع جميع الاجهزة
  • خيارات التحكم بالخط
  • متوافق مع أي موقع

الآن قبل أن نتطرق لطريقة التركيب سأعرض عليكم قائمة أفضل الخطوط بأشكالها مرفقة مع أكوادها

Noto Sans Kufi Arabic
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
font-family: 'Noto Sans Kufi Arabic', sans-serif;

الخط الأميري
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/amiri.css);
font-family: 'Amiri', serif;

Droid Arabic Naskh
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css)
font-family: 'Droid Arabic Naskh' , serif;

خط ثابت
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/thabit.css);
font-family: 'Thabit', serif;

خط شهرزاد
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/scheherazade.css);
font-family: 'Scheherazade', serif;

Noto Naskh Arabic UI
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/notonaskharabicui.css);
font-family: 'Noto Naskh Arabic UI', serif;
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2.ابحث بإستعمال CTRL+F عن  ]]></b:skin> ثم ضع كود الخط الذي تريد فوقه فقط المحدد بالأحمر
3. طريقة الاستخدام في داخل التصميم تكون عن طريق اضافة كود اسم الخط مثال : font-family: 'Amiri', serif; في القسم المراد تطبيق عليه الخط
هنا ننتهي مع الخطوط العربية التي تدعم التضمين في صفحات الويب، للمزيد من الخطوط سواء عربية أو أجنبية ندعوكم بزيارة خطوط جوجل
في حال كان لديك أي تسائل وتريد تطبيق الخط فقط اترك تعليق يوضح سؤالك، ولا تنسى أن تدعمنا بمشاركة التدوينة إذا نالت إعجابك
16 Blogger تعليقات
Disqus
16 التعليقات
المشرف
avatar

حقا خطوط رائعة أعجبني خط الأميري سأستعمله بمدونتي الخاصة بالكتب
سؤال اخي حسام الخط الذي تستعمله أنت في المواضيع هل هو Droid Arabic Naskh؟ وأشكرك كثيرا على هذه التدوينة

المشرف
avatar

العفو اخي نورتنا بمرورك هذا، نعم الخط هو Droid Arabic Naskh وإذا كنت ستستعمله فقط أضف إسم خطه لا داعي لإضافة كوده... فهو يشتغل على أية حال وبأي موقع فقد تعجبت بنفسي من ذلك الأمر 😀

المشرف
avatar

جميل حساب ومبهر بمواضيعك احب متابعتك دائما ^^
تدوينة جميلة

المشرف
avatar

والله خطوط جميلة حتمًا، حتى أنه تصلح
في الإستخدام لترجمة الأنمي أيضًا :D شيء
جميل، بس مكتبة الخطوط العربية في غِنًى عن ذلك
ترا ~ هيهيهي! باركك الله حسام كن، بانتظار المزيد... :3

المشرف
avatar

نحط الكود الاحمر قبل ولا بعد ؟ ]]>

المشرف
avatar
المشرف
avatar

أشكرك على مجهودك , و أنا من متابعيك أخي الكريم لكنني لم أفهم المرحلة التالة , واصل
تحياتي

المشرف
avatar

يعني أن تضعه مثلا ضمن كود Css العناوين أو الموضوع أو تطبقه على المدونة بأكملها لكن يجب أن تكون لك دراية بالأكواد... تابع هذه التدوينة :
http://www.ar1web.com/2014/08/blog-post_22.html
فبها شرح إن واجهتك صعوبة فقط عد مجددا وسأساعدك

المشرف
avatar

مفهمتش الخطوة الاخيرة يعنى الخط لو عايز اغيره فى التدوينات اعمل ايه بالظبط ؟

المشرف
avatar

أخ حسام راسلتك من نموذج الاتصال لتنجز لي مدوّنة او بالاحرى تعدّل لي قالب بالسّعر الّذي تحدّده انت و الدفع سيكون مسبقا باذن الله و لا اعلم ان كانت رسائلي وصلتك
فارجو ان تجيبني أخي الكريم لاغلق هذا الباب

المشرف
avatar

لإضافة خط للمواضيع اضف هذا الكود
.post-body {font-family: Droid Arabic Naskh!important;}
فوق ]]></b:skin>
ثم غير Droid Arabic Naskh بإسم الخط الذي تريد

المشرف
avatar

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

المشرف
avatar

سانتظر اتصالا منك عندما تكون جاهز و ارجو ان لا تنساني
imed.kr@gmail.com
https://web.facebook.com/garoui.imed
بالله عليك اتّصل بي عندما عندما تكون متواجد و على كل حال ان كان في العمر بقيّة سانتظرك

المشرف
avatar

لو سمحت اريد ان اعرف ما هى الجملة التى تكتبها كمثال ( التى فيها كلمة لوريم ابسون ) اراها فى مواقع كثير ولا ادرى لما يكتبونها .. ارجو الافادة

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة