الثلاثاء، 17 مارس 2015

مجموعة خطوط عربية إحترافية للمواقع مع الشرح

أكمل المقال


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

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

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

لمدونتك رؤية عميقة لزائر نبدأ على بركة الله

الموقع المستخدم للحصول على الخطوط هو موقع ديفنيا

شرح طريقة تركيب الخطوط

* في الموقع يوجد الكثير من الخطوط بعد إختيارك لأحد الخطوط ، إضغط على إستخدام بعدها سيظهر لك كود الخط و إسم الخط 

  1 . توجه لقالب >> تحرير 

  2. ابحث بإستعمال CTRL+F عن :  <head/>

  3. ضع كود الخط فوقة 

  4. في أخر الكود عليك إضافة رمز سلاش : / 

  لقوالب بلوجر فقط

توضيح

 rel="stylesheet"/>


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

1. إبحث عن : } body

2. في أسفل الكود قد ترى إسم : font-family بجانبه يوجد إسم الخط القديم غيره بإسم الخط الذي إخترته ويجب ألا تحذف الفاصلة والنقطة في أخر الخط 

* في حالة لم تجد font-family في } body يمكنك إضافته هكذا : font-family ثم أمامه أضف الخط مع الفاصلة والنقطة ;

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

المواضيع أو لتسميات وهكذا أيضا يجب البحث في القالب عن font-family والتي ستجدها مكررة يتحتم عليك إضافة إسم الخط 

ولا تنسى أن تراعي الفاصلة والنقطة ; بدونها لن يطبق الخط

في الأخير أتمنى أن يكون الشرح مفهوم للمبتدئين وأي إستفسار يمكن طرحه في صندوق التعليقات

الجمعة، 12 سبتمبر 2014

اضافة خطوط GESSTwo الرائعة من جديد (روابط جديدة)

أكمل المقال
لاحظنا فى الفترة الأخيره توقف معظم الخطوط والسلايدرات فى جميع المدونات وهذا راجع لأن موقع dropbox بألغاء خاصية رفع الملفات ال css والتى كانت يعتمد عليها مئات بل الاف المدونين والمبرمجين فى حفظ ملفات css. الخاصة بمواقعهم بروابط مباشره 
حيث يستطيعون ربطه بقالب موقعه عبر رابط مباشر ومجانى ولكن للأسف تم ألغاء هذه الخدمة والتى أدت لتوقف الملفات الخاصة
بعظم المواقع ولعل أهما لدى المدونين والمبرمجين هى الخطوط والتى تعمل فى بلوجر تحتى مسمى font face@
ولا حظت مع توقف هذه الملفات أن معظم المدونين كانوا يستخدموا خط GESS Two فى مواقعهم لذلك قمت بتجديد الروابط الخاصة بهذا الخط على googlecode



وكانت معظم المدونات يستخدمون هذه الروابط المباشره فى مدوناتهم


@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'); }

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

حسنا .. نحمد الله أننا احتفظنا بالملفات الأصلية لمجموعة خطوط (GESSTwo) الجميلة ..
وسنضيف أحد النوعين من هذه الخطوط إلى قوالب مدوناتنا في خطوتين وبالاعتماد على رابط واحد فقط لكل نوع
بدل الأربعة روابط التي كانت بالكود السابق ..

حسنا نمر الشرح 

الخطوة الأولى


من لوحة تحكم الى > قالب > تحرير HTML  وقم بالبحث عن 

<head>

أضف بعده الكود التالى الخاص بخط GESSTwoLight ذو البند الرفيع


<link href='https://asma-rahmouni.googlecode.com/svn/trunk/GESSTwoLight.css' rel='stylesheet' type='text/css'/>

أو أضف بعده الكود التالى الخاص بخط GESSTwoMediumRegular ذو البند المتوسط 


<link href='https://asma-rahmouni.googlecode.com/svn/trunk/GESSTwoMediumRegular.css' rel='stylesheet' type='text/css'/>

الخطوة الثانية

ابحث عن font-family .. وهو الخاص بنوع الخطوط
ستجده يحتوي على عدة أسماء لخطوط مثل هذه:

font-family: Traditional Arabic, Tahoma, Arial, Sans-serif;

حيث أن عنوان الخط الأول (Traditional Arabic) وفي حال لم يظهر لدى المتصفح سيظهر الخط الثاني (Tahoma) وهكذا ..

ما سنقوم به الآن هو جعل عنوان الخط الأول (GESSTwoMediumRegular) أو (GESSTwoLight) ليظهر في مدونتك كخط رئيسي، وذلك بنسخ اسم الخط المحدد ولصقه كالتالي:

لأضافة الخط الأول GESSTwoLight

تجعل الكود السابق بهذه الشكل

font-family: GESSTwoLight, Traditional Arabic, Tahoma;

ولأضافة الخط الثانى GESSTwoMediumRegular

تجعل الكود السابق بهذه الشكل

font-family: GESSTwoMediumRegular, Traditional Arabic, Tahoma;

قم بمعاينة القالب الآن، لتجد الخطوط فيها قد أصبحت أجمل بكثير ..
احفظ التغيرات واستمتع بلمسة احترافية أضفتها الخطوط الجديدة في مدونتك :)