logo

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

شرح استخدام خطوط جوجل الجديده فى المواقع العربيه

خطوط جوجل العربيه مع تطور الويب اصبح من الممكن تضمين الخطوط فى صفحات المواقع حتى إذا لم تكن موجودة لدى من يشاهد الموقع. ويمكن لصاحب الموقع ا





19-10-2013 09:17 صباحاً
معلومات الكاتب ▼
تاريخ الإنضمام : 26-10-2010
رقم العضوية : 873
المشاركات : 17
الجنس :
قوة السمعة : 0
موقعي : زيارة موقعي
خطوط جوجل العربيه
مع تطور الويب اصبح من الممكن تضمين الخطوط فى صفحات المواقع حتى إذا لم تكن موجودة لدى من يشاهد الموقع.

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

والخبر الجديد هنا أنه بدأت خدمه خطوط جوجل فى توفير خطوط عربيه لإستخدامها فى المواقع العربيه ، وهم الآن في مرحلة الاختبار.
وبالتالى اذا كنت صاحب موقع منتدى او مدونه يمكن تجربه هذه الخطوط الجديده وهى رائعه بالمناسبه على موقعك.
مثال لخطوط جوجل : ستايل رقم 5 فى موقع منتدايا سوف تجد ستايل الموقع يستعمل مزيج من خط الدرويد الكوفى وخط الدرويد النسخ .

ويتوفر الآن ستة خطوط العربية وهم :
الخط الأميري الرائع
خط الدرويد الكوفي
خط الدرويد النسخ
خط لطيف
خط شهرزاد
وأخيراً خط "ثابت" وهو خط ذو عرض محدد (fixed-width font).

أمثله على الخطوط
md2g

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

Google Web Fonts : Early Access

طريقه الإستخدام

أولا الدخول على موقع خطوط جوجل ونسخ رابط ملف الخط المطلوب الموجود باسفل اسم ووصف الخط - مثلا اذا قررت استخدام خط الدرويد الكوفى سيكون كالتالى :
CODE

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);


ثانيا اذا كنت تستخدم ملف .css خارجى لموقعك فقم بفتحه والصق فى اوله الرابط السابق الذى نسخته من موقع خطوط جوجل
اما اذا لم تكن تستخدم ملف css فتوجه الى صفحات موقعك وبين وسمى رأس الصفحه قبل :
الصق الكود التالى :
CODE

<style type="text/css">
@import url(http://fonts.googleapis.com/earlyaccess/thabit.css);
</style>


ثالثا تحديد اسم الخط واستخدامه مع النص - واسم الخط المطلوب يجب ان يكون كما هو مكتوب فى موقع خطوط جوجل اسفل رابط الخط - مثلا فى حالتنا هذه خط الدرويد الكوفى سيكون :
[p]
Droid Arabic Kufi</pre>

فيكون الكود كالتالى :
CODE

.style1 {
font-family:Droid Arabic Kufi;
}

مع تغيير style1 بما يتناسب مع صفحتك او الستايل الذى تستخدمه
[p]

وهكذا مع باقى الخطوط .. وكل ما تحتاجه من موقع خطوط جوجل هو رابط ملف الخط واسم الخط نفسه ثم تقوم بتضمينه فى موقعك كما سبق الشرح
</pre>

شرح فيديو لإضافه الخطوط الى منتديات pbboard ومدونات ورد بريس

مع اطيب تحياتى
تم تحرير الموضوع بواسطة :mezo بتاريخ:19-10-2013 09:21 صباحاً

look/images/icons/i1.gif شرح استخدام خطوط جوجل الجديده فى المواقع العربيه
  19-10-2013 02:00 مساءً   [1]
معلومات الكاتب ▼
تاريخ الإنضمام : 15-10-2012
رقم العضوية : 2494
المشاركات : 616
الدولة : اليمن
الجنس :
تاريخ الميلاد : 10-1-1998
الدعوات : 23
قوة السمعة : 2100
موقعي : زيارة موقعي
العضو غائب تدهور الاوضاع في في المنطقه
رائع أخي ها الشرح رااائع جداً

look/images/icons/i1.gif شرح استخدام خطوط جوجل الجديده فى المواقع العربيه
  19-10-2013 02:14 مساءً   [2]
معلومات الكاتب ▼
تاريخ الإنضمام : 15-10-2012
رقم العضوية : 2494
المشاركات : 616
الدولة : اليمن
الجنس :
تاريخ الميلاد : 10-1-1998
الدعوات : 23
قوة السمعة : 2100
موقعي : زيارة موقعي
العضو غائب تدهور الاوضاع في في المنطقه
إستفسار:
أين الخطوط العربية كلها إنجليزية.

تحياتي.....2flw5


تم تحرير المشاركة بواسطة :محمد بتاريخ:19-10-2013 02:15 مساءً


look/images/icons/i1.gif شرح استخدام خطوط جوجل الجديده فى المواقع العربيه
  19-10-2013 04:24 مساءً   [3]
معلومات الكاتب ▼
تاريخ الإنضمام : 17-04-2011
رقم العضوية : 1448
المشاركات : 389
الجنس :
قوة السمعة : 232
موقعي : زيارة موقعي
شكرا لك على هذا أخي لكن هناك مشكلة عدم توافقه مع قوقل كروم أي عند تصفح الموقع بمتصفح قوقل كروم google Chrome

حيث أن هناك تشوه

في الأول طننت أن المشكلة عندي فقط لكن بعد التجربة على عدة مواقع اتضح فعلا أن هناك مشكل

ومن المواقع موقعك أنت الذي وضعته في الموضوع انظر إلى الصور عند التصفح بكروم ثم بغيره :

1- قوقل كروم :


MzQ3MTc1MQ656519-10-2013%2014-12-34

MjI5MzE1MQ333319-10-2013%2014-13-57

2- موزيلا + إكسبلورر :

MzIxODAxMQ27273

MzIwNDgwMQ17174


سأبحث عن حل لهذه المشكلة وإن وجدت سوف أضعه هنا إن شاء الله أو أحد الإخوة يعطينا حلا لمن لديه حل.

تنبيه : المشكلة فقط مع خطي : Droid Arabic Kufi و Droid Arabic Naskh فقط أما الباقي فلا توجد مشكلة.
 
  19-10-2013 14-12-34.png   تحميل png 19-10-2013 14-12-34.png مرات التحميل :(11)
الحجم :(4.84) KB
  19-10-2013 14-13-57.png   تحميل png 19-10-2013 14-13-57.png مرات التحميل :(11)
الحجم :(6.381) KB
 



تم تحرير المشاركة بواسطة :محمد333 بتاريخ:19-10-2013 05:09 مساءً


look/images/icons/i1.gif شرح استخدام خطوط جوجل الجديده فى المواقع العربيه
  19-10-2013 04:40 مساءً   [4]
معلومات الكاتب ▼
تاريخ الإنضمام : 27-11-2012
رقم العضوية : 2642
المشاركات : 3231
الدولة : morocco
الجنس :
تاريخ الميلاد : 1-1-1987
الدعوات : 6
قوة السمعة : 18750
مرحبا أخي بارك الله فيك على الشّرح المميّز

عندي مداخلة بخصوص ال css import بحيث أنّ معظم محرّكات البحث تُحذّر من استخدام هذه الخاصّية لتجنّب الاستدعاءات الغير متوازية

فعوض أن نكتب
CODE

	@import url(http://fonts.googleapis.com/earlyaccess/amiri.css);
	

في ورقة css
يُفضّل كتابة
CODE

	<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/amiri.css" />
	

في قالب headinclud قبل غلق الوسم head مع الحفاظ على الترتيب




مثال على ذلك :
ملحق تمكين الزوار والأعضاء من تنسيق المواضيع وتغيير الخطوط Jquery Fontz


المشاركة الأصلية كتبت بواسطة: محمد333 شكرا لك على هذا أخي لكن هناك مشكلة عدم توافقه مع قوقل كروم أي عند تصفح الموقع بمتصفح قوقل كروم google Chrome

حيث أن هناك تشوه
نفس المشكله مع متصفّح أوبرا


تم تحرير المشاركة بواسطة :Mr King بتاريخ:20-10-2013 01:58 صباحاً


look/images/icons/i1.gif شرح استخدام خطوط جوجل الجديده فى المواقع العربيه
  19-10-2013 05:15 مساءً   [5]
معلومات الكاتب ▼
تاريخ الإنضمام : 17-04-2011
رقم العضوية : 1448
المشاركات : 389
الجنس :
قوة السمعة : 232
موقعي : زيارة موقعي
المشاركة الأصلية كتبت بواسطة: Mr King مرحبا أخي بارك الله فيك على الشّرح المميّز

عندي مداخلة بخصوص ال import بحيث أنّ معظم محرّكات البحث تُحذّر من استخدام هذه الخاصّية لتجنّب الاستدعاءات الغير متوازية

فعوض أن نكتب
CODE

	@import url(http://fonts.googleapis.com/earlyaccess/amiri.css);
	

في ورقة css
يُفضّل كتابة
CODE

	<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/amiri.css" />
	
السلام عليكم

أخي الكريم قوقل هو الذي طلب استخدام import وهو في نفس الوقت أكبر وأقوى وأشهر محركات البحث

فهل يُعقل أن يطلب استخدامها وفي نفس الوقت يحذر منها ؟


تم تحرير المشاركة بواسطة :محمد333 بتاريخ:19-10-2013 05:17 مساءً


look/images/icons/i1.gif شرح استخدام خطوط جوجل الجديده فى المواقع العربيه
  19-10-2013 05:20 مساءً   [6]
معلومات الكاتب ▼
تاريخ الإنضمام : 27-11-2012
رقم العضوية : 2642
المشاركات : 3231
الدولة : morocco
الجنس :
تاريخ الميلاد : 1-1-1987
الدعوات : 6
قوة السمعة : 18750

look/images/icons/i1.gif شرح استخدام خطوط جوجل الجديده فى المواقع العربيه
  19-10-2013 05:28 مساءً   [7]
معلومات الكاتب ▼
تاريخ الإنضمام : 17-04-2011
رقم العضوية : 1448
المشاركات : 389
الجنس :
قوة السمعة : 232
موقعي : زيارة موقعي
المشاركة الأصلية كتبت بواسطة: Mr King تفضّل أخي هذه وصايا جوجل https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport
شكرا لك على الفائدة أخي

أنا فقط تساءلت كيف يضعونه ومن جهة أخرى يحذرون من استعماله !!!

look/images/icons/i1.gif شرح استخدام خطوط جوجل الجديده فى المواقع العربيه
  20-10-2013 06:46 صباحاً   [8]
معلومات الكاتب ▼
تاريخ الإنضمام : 26-10-2010
رقم العضوية : 873
المشاركات : 17
الجنس :
قوة السمعة : 0
موقعي : زيارة موقعي
المشاركة الأصلية كتبت بواسطة: محمد إستفسار:
أين الخطوط العربية كلها إنجليزية.
ابحث فى الصفحه عن كلمه arabic وسوف تجدهم فى الصفحه وعددهم 6
وشكرا لك يسعدنى ان الشرح اعجبك

------------

اخى محمد333
بصراحه لا اعلم اين المشكله .. فمعلوم لدى ان الستايل على موقعى كانت به مشاكل عند عرضه بالإكسبلورر وذلك منذ ان ركبته فى المنتدى
ولكن انت لاحظت المشكله على مواقع اخرى فى خطين فقط وبنوعين من المتصفحات فقط كما فهمت
عموما اغلب الظن انها فى المتصفح لانه هناك مشاكل اخرى كثيره تظهر مع الاكسبلورر حتى فى المواقع غير العربيه
تحياتى لك واخبرنا اذا وجدت جديد

-------------
اخى Mr King
كلامك صحيح 100% وهى معلومه جديده بالنسبه لى
فشكرا للتنبيه

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

بارك الله فيكم جميعا
وشكرا

اضافة رد جديد اضافة موضوع جديد
الصفحة 2 من 2 < 1 2 >





الكلمات الدلالية
لا يوجد كلمات دلالية ..









الساعة الآن 02:26 PM