نظرة: على خطوط الويب وكيفية استخدام خطوط خاصة لمدونات بلوقر

خطوط الويب لمدونات البلوقر
   هل زرت موقع ما مثل طريق الإسلام وأعجبتك الخطوط المميزة والفريدة المستخدمه فيه ؟. إن استخدام خطوط مخصصة لمدونتك لا شك سيضيف لشخصيتها نكهه خاصة ويضيف لجمالها وحسنها قيمة الأصالة التي يتمتع بها الخط العربي أجمل خطوط الدنيا ! . ثورة خطوط الويب بدأت حسب متابعتي بعد اطلاق قوقيل مكتبة خطوط الويب المجانية، التي للأسف حتى الآن لا تدعم اللغة العربية.
    في هذا التدوينة سأحاول توضيح كيفية استخدام خطوط خاصة لمدونتك ، وكيف نستثمر الخطوط العربية الحاسوبية المجانية بتحويلها وتهيئتها لنستخدمها كخطوط ويب ، وكالعادة ستكون منصة بلوقر هي المعنية بشكل رئيسي؛ لأنها بحاجة الى تعامل خاص كما سيأتي إن شاء الله . سأحاول قدر جهدي توضيح الآلية بشكل أكثر شمولية. ولنفتح النفسية هذا مثال على خطوط درويد نسخ و درويد كوفي وهي مخصصة لنظام اندرويد قمت باعدادها لتناسب الويب : اضغط هنا . وان شئت تنزيل المثال على حاسوبك اضغط هنا . ان أعجبتك الفكرة وتحمست فباسم الله نبدأ ، اعلم أولاً أن طول هذه التدوينة ليس لأن الموضوع صعب بل هو يسير جداً ولكن الاستطراد ونثر التنبيهات ضروري وبمجرد تطبيقك مرة أو مرتين ستصبح الطريقة يسيره جداً . . . 

أولاً: كيف تتعامل المتصفحات مع الخطوط ؟

  نَعلمُ أن المتصفح يُظهر الموقع حسب التعليمات والخصائص التي يكتبها المصمم في ورقة الأنماط CSS ، وورقة الأنماط أيضاً تحدد اسم الخط وخصائصه كالمقاس واللون. الخطوط هي عبارة عن ملفات قابعة في حاسوب زائر الموقع، فلو اختار مصمم الموقع الخط ( Arial ) فسيكتب اسمه في خصائص الأنماط CSS وبهذا سيطلب المتصفح هذا الخط من مكتبة الخطوط في حاسوب زائر الموقع، فإذا وجد هذا الخط سيتم عرضه بشكلٍ سليم، وان لم يوجد سيعرض المتصفح الموقع بخط آخر وغالباً سيكون ( tahoma ). وتحسباً لإمكانية عدم وجود الخط المطلوب فإن المصمم يكتب أسماء ثلاثة خطوط أو أكثر يتم طلبها حسب ترتيبها فإذا لم يوجد الخط الأول يعرض الخط الثاني وإذا لم يوجد الثاني يطلب الثالث وهكذا . . . في مدونات بلوقر غالباً نحدد اسم الخط بكتابة سطر كهذا:
.post-body {   font-family: Arial; }
لا تنسى أن الخط arial عبارة عن ملف موجود في حاسوب الزائر ، ولكون هناك احتمال عدم وجود الخط أو أي خلل آخر، فيفضل كتابة أكثر من خط ، مثلاً:
.post-body { font-family:arial,"Traditional Arabic",tahoma; }
تلميح: إذا احتوى اسم الخط على مسافة فارغه فيجب كتابة علامة تنصيص على جانبي اسم الخط . . .



ثانياً: أشهر أنواع صيغ الخطوط web fonts formats

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

1. TrueType - ttf : من تطوير آبل وهي الصيغة الأشهر، ولن يخلو نظام حاسوبي إلا وفيه عدد كبير من الخطوط بهذه الصيغة، وستجد عدد كبير من الخطوط العربية المتوفرة في الشبكة العالمية بهذه الصيغة ...  للاستزاده.

2. OpenType otf : هي امتداد لصيغة TrueType وما فهمته أن هذا النوع يحتوي على حزمة حروف أكبر وبالتالي أكثر قدرة على عرض وطباعة الحروف مع دعم أفضل للغات المختلفة ! وهو نتيجة تعاون بين أدوبي وميكروسوفت. للاستزاده.

3. Embedded OpenTypeeot : اشتقتها ميكروسوفت من صيغة من OpenType، هذه الصيغة حصرية لمتصفح إنترنت اكسبلورر. هذا النوع قد يحتوي على عناوين لمواقع محددة يعمل لها فقط، لحفظ الحقوق طبعاً!. البعض يعتقد أن هذه الصيغة من الخطوط يمكن تجاهلها ولكن هذا خطأ فادح ( حتى هذا اليوم ) لأن انترنت اكسبلورر الثامن IE8 ما زال هو المهيمن.

4. WebOpen Font Formatwoff: هذه الصيغة في حقيقتها مجرد وعاء لـ TrueType أو OpenType ، ولكن هذا الوعاء مضغوط ليحقق حجم أقل ليناسب متطلبات المواقع من ناحية سرعة عرض الخطوط، بالإضافة إلى أن هذه الصيغة تحتوي على معلومات أساسية MetaData عن الخط مثل المصنع ورخصة الاستخدام ! لذلك هي الصيغة التي توصي بها رابطة الشبكة العالمية W3C . وهي الصيغة هي التي تسعى جميع المتصفحات لدعمها.

تلميح:
  • هناك صيغة يتناولها بعض المهتمين وهي صيغة svg وهي خاصة بأنظمة IOS ؛ ولاعتبارات من أهمها كبر حجمها وكون النظام المحدث من IOS يدعم ttf مثلاً ( ios لا يدعم خطوط الويب العربية ! ) ، فأرى أنها صيغة تستحق أن لا يلتفت اليها !.
  • باستثناء الصيغة woff فإن جميع الصيغ السابقة قد يصلح استخدامها كخط ويب مباشرة وقد لا تصلح ، ولذلك يتوجب علينا اختبار أي خط نقع عليه، مالم نجده معروض كخط ويب من المصدر.



ثالثاً: دعم المتصفحات المشهورة لخطوط الويب

قمت بتجربة مختلف صيغ الخطوط على أشهر المتصفحات وكتبت النتائج في الجدول التالي:

webfont_0001

مع الإشارة الى التالي:
  • أعرضت عن الصيغة svg للأسباب التي ذكرتها في الفقرة السابقة.ومن أهمها الحجم الكبير.
  • أعرضت عن الصيغة otf لكبر حجمها مقارنة بـ ttf ، ونحن في خطوط الويب نبحث عن الحجم الأقل!.
  • النظام المحدث من ios لا يدعم خطوط الويب العربية ، بحثت عن حلول لم أجد ، حتى أني قمت باستخدام خطوط ويب عربية يوفرها موقع متخصص ولم تظهر !
  • الصيغة woff أقل بكثير من ttf وتغني عنها غالباً ، وتدعهما كل المتصفحات المعروفه ، ويدعمها كذلك متصفح اندرويد الأشهر dolphine.
  • الصيغة eot يدعمها حصرياً متصفح انترنت اكسبلورر بجيع اصداراته.
  • مهم: قد تظن أنه يمكن الاستغناء عن الصيغة EOT لأننا لا نحتاجها عملياً إلا لدعم IE8، وهذا خطأ فمتصفح الانترنت اكسبلورر الثامن IE8 ما زال مهيمناً بشكل كبير في العالم العربي حسب الإحصائيات ، فحالياً ليس من الحكمة تجاهل مستخدمي IE8 وهم الأكثرية.وان قررت تجاهله فلا تضع تصويت حول قالب مدونتك !! .
  • لمراقبة شهرة المتصفحات يمكنك الاستعانة بموقع: StatCounter
والنتيجة:
  • أرى أن أفضل وأشمل استخدام هو الجمع بين الصيغتين ( WOFF و EOT ) وان شئت أن تكون أكثر تحفظاً فلتكن الصيغة  TFF ثالثتهما ( EOT , WOFF , TFF )



رابعاً: أين أجد خطوط الويب المناسبة ؟

الخطوط أيها المبارك تماماً مثل البرامج فيها المجاني وفيها المدفوع ، أنا عن نفسي تفاجأت بأسعارها العالية ! ، تنتشر كثير من روابط الخطوط المقرصنة المشتهره، وخلال بحثي وجدت أن في الخطوط المجانية الكفاية. غالباً ستجد الخط متوفرة بالصيغة TTF أو OTF ، وبما أنها كالبرامج فالبحث عنها وايجادها سيكون باتباع الطرق المعتاده، مثلاً :
  • البحث من خلال Google بكلمات ذات دلاله على خطوط الويب.
  • التوجه الى المواقع المتخصصة بالخطوط العربية مثل: مكتبة الخطوط العربية ، مشروع الخط الأميري ، مشروع خط درويد نسخ ، أو درويد كوفي …. وهكذا
  • ممكن الكشف عن خطوط الويب لموقع ما بالنظر في الكود المصدري للموقع.( لا أرى بأساً في ذلك طالما أن الخطوط التي فيها مجانية )
فالمسألة إذاً متعلقة بمهارتك في البحث عن المعلومة خلال الإنترنت. وأمر من المهم أن تدركه وهو ← الخط الذي ستجده قد لا يعمل كخط ويب غالباً ويحتاج تهيئة بالادوات التي سأعرضها لاحقاً ، وربما لن نستطيع تحويل الخط البته كونه حصري لبرامج مثل الفوتوشوب مثلاً.



خامساً: أين أجد الصيغ الأخرى مثل eot و woff ؟

حسناً إذا وجدت الخط بصيغة ttf أو otf فهذا يكفي ، وسنستخدم أدوات وبرمجيات صغيرة للتحويل الى الصيغ الأخرى. وقبل أن نقوم بعملية التحويل يجب أن نتأكد من أن الخط ttf يعمل بشكل سليم على المتصفح كخط ويب؛ فأحياناً يظهر بحروف غير متصلة، والحل يكون يتحويل ttf إلى ttf ولكن الملف الناتج ورغم أنه بنفس الصيغة الا انه بمشيئة الله سيكون بحروف متصلة وسليمه. الآن سأعرض بعض المحولات التي جربتها ، مثل :

الأدوات:
  • برنامج sfnt2woff : يحول الخط الى الصيغة woff ، مبرمج هذه الأداة هو ثالث مطوري صيغة woff من شركة موزيلا ؛ وبالتالي هذه الأداة فعالة جداً ، هناك نسخة لويندوز ، وأخرى للماك .
  • برنامج eotfast : يحول الخط الى الصيغة eot بل ويقلل حجمها بشكل جيد جداً ، يعمل على ويندوز فقط .
  • البرنامجان السابقان يعملان بنفس الطريقة، ضع البرنامج في مجلد بجوار ملف الخط المطلوب تحويله، ثم اسحب ملف الخط الى ايقونة البرنامج في ثانية سيظهر ملف جديد هو الخط بالصيغة المطلوبة.
المواقع:
  • Free Font Converter : يحول بين مختلف صيغ الخطوط، الأداء ممتاز.
  • Font2Web : يحول من صيغة ttf أو otf الى مجموعة صيغ مع ملفات تجريبيه للصيغ المحوله ، ان شئت تجربتها عليك أن تحرر العبارة اللاتينية الى أي عبارة باللغة العربية ( لأن الخط العربي قد لا يدعم الحروف اللاتينية ). يعيب هذا الموقع رغم سرعته العجيبة أنه يعطيك ملفات خطوط ذات حجم كبير نسبياً في بعض الأحيان !
  • Onlie Font Converter : يحول بين مختلف الصيغ أداء جيد.
  • ttf2eot : يحول من صيغة ttf إلى eot.
  • Font Squirrel : أشهر موقع خطوط لعرض الخطوط ، بالإضافة الى خدمة تحويل صيغ الخطوط ، هو الأكثر استخداماً بلا منازع. بالنسبة للخطوط العربية لابد من اختيار التبويب “EXPERT” ثم وضع علامة عند الخيار “ No Subsetting “.
تنبيه:
  • عند اعدادك خط ما لمدونتك فخذ وقتك ولا تستعجل، واستخدم كل المحولات السابقة وقارن بين أحجامها وتأكد من كون الخطوط المخرجة تعمل بشكل سليم. وبشكل عام فالأدوات أفضل من برمجيات المواقع حسب تجربتي ولكن أحياناً تختلف النتائج حسب الخط.



سادساً: أين أحفظ خطوط الويب الخاصة بمدونتي ؟

مثل ملفات الجافا وغيرها فإن ملفات خطوط الويب بحاجة للحفظ في موقع يوفر روابط مباشرة HotLink لربطها بالمدونة ، حسناً سأعيد كتابة أفضل ثلاثة مواقع يمكن الاعتماد عليها:
  • Google Code : هو الأفضل  وسبق أن قمت بشرح كيفية استخدامه.
  • Google Sites : سهل وبسيط يمكنك الاستزاده ومتابعة هذا الموضوع .
  • DropBox : الموقع الرائع ان شئت اقرأ عنه من هنا . حقيقة لا يضاهيه موقع آخر حتى google drive !
  • أي موقع آخر بشرط يوفر روابط مباشرة HotLink لجلبها وربطها في قالب مدونة بلوقر.



سابعاً: طريقة استخدام خطوط الويب في مدونات بلوقر

سنفترض الآن أننا لدينا خط ويب جميل للمدونة بثلاث صيغ ( TTF – WOFF – EOT ) ، ومرفوع على أحد المواقع. الآن سنستخدم CSS3 لتضمين هذا الخط الجميل في قالب المدونة ونعطيه اسماً ، وبهذا سيكون هذا الخط تحت رهن الإشارة لننسق به خطوط أي جزء من المدونة …

تضمين الخط في القالب:
في الجزء الخاص بأنماط المدونة أي CSS ، نبحث عن السطر :
]]></b:skin>
إذا كنت تستخدم قالب رسمي من بلوقر ستجد هذا السطر مختلف ويكون على هذا البناء:
]]> </b:template-skin>
ونكتب قبله الكود الذي يضمن الخط عبر الخاصية font-face :
@font-face {
font-family: 'demo';
src: url('http://domian.com/fonts/demo.eot');
src: url('http://domian.com/fonts/demo.eot?') format('embedded-opentype'),
url('http://domian.com/fonts/demo.woff') format('woff'),
url('http://domian.com/fonts/demo.ttf') format('truetype'); }

  • لاحظ في السطر الثاني قمنا باعطاء الخط اسم مميز له وهو ( demo ) . طبعاً في التطبيق الحقيقي يفضل أن يكون اسم الخط مشتق من اسمه الأصلي.
  • في السطر الثالث والرابع قمنا بتضمين رابط للخط بصيغة eot ، بالنسبة لتكرار كتابة رابط الخط وعلامة الاستفهام فهذه مجرد حيلة لتفادي ظهور خطأ في متصفح الاكسبلورر ، هناك حيل أخرى في كتابة هذا الكود ولكن هذه الطريقة هي آخر ما توصل اليه المحترفين لتفادي تعثر IE.
  • السطر الخامس لصيغة woff والسادس لصيغة ttf.
  • حافظ على هذا الترتيب ولا تغيره.
  • لاحظ أننا في مدونات بلوقر سنكتب روابط الخطوط كاملة لأنها محفوظة في موقع آخر.
  • إذا عندك أكثر من خط يمكنك كتابتها جميعاً بنفس الطريقة، أنصحك بعدم استخدام أكثر من خطين في المدونة لأن كثرة الخطوط تعني بطئ أكبر.

استخدام الخط:
قبل استخدام خط الويب الخاص بمدونتك، أفضل تنسيق خطوط المدونة بالخطوط الأساسية مثل arial أو tahoma وغيرها ، ثم بعد الانتهاء من ذلك قم بكتابة اسم خط الويب الخاص قبلها في الترتيب ؛ وهذا حتى في حال تعطل خط الويب لأي سبب يكون التنسيق الأساسي هو الذي يتحكم بمظهر المدونة. وبالتالي لو افترضت أني ساستخدم خط أساسي هو airal وخط ويب هو demo فسأكتب الخصائص كالتالي:
.post-body {   font-family: demo, Arial; }



ثامناً: مثال تطبيقي

حسناً سنحاول الآن اجراء تطبيق عملي لاستخدام خطوط درويد نسخ ودرويد كوفي ، وتحويلها ومن ثم تضمينها قالب المدونة :
  • نزل خطوط درويد من موقع المشروع:  النسخالكوفي . الخطوط ستكون بصيغة TTF نحتاج تحويلها الى الصيغ الأخرى وان اتفقت معي فالأفضل نستخدم eot و woff .
  • نستخدم الأداة ( eotfast ) لتحويل جميع الخطوط الى صيغة eot .
  • نستخدم الأداة ( sfnt2woff ) لتحويل جميع الخطوط الى صيغة woff.
  • الآن .. نجمع الخطوط في مجلد ولنسميه مثلاً webfont.
  • ارفع المجلد بكافة الخطوط التي بداخله الى موقع dropbox . ( أو أي موقع آخر )
  • هكذا تكون الخطوط جاهزه. يمكنك تنزيل الخطوط محولة من هنا .
  • تضمين الخطوط في المدونة يبدأ باستخدام خاصية font-face وستكون كالتالي:
@font-face {
font-family: 'DroidKufi-Bold';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Bold.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Bold.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Bold.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Bold.ttf') format('truetype');}

@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}

@font-face {
font-family: 'DroidNaskh-Bold';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Bold.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Bold.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Bold.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Bold.ttf') format('truetype');}

@font-face {
font-family: 'DroidNaskh-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Regular.ttf') format('truetype');  }

  • لاحط أنني كتبت روابط الخطوط كاملة ، ولاحظ كذلك أنني كتبت اسماء للخطوط تدل على اسم الخط الأصلي.
  • الآن توجه لقالب مدونتك وانسخ اليه هذا الكود في جزء خصائص الأنماط css مثلاً قبيل هذا السطر مباشرة:
]]> </b:template-skin>

  • استخدم أياً من الخطوط بدلاله اسمائها في أي مكان ( عنوان المدونة – وصف المدونة – عناوين القائمة الجانبية – عناوين الرسائل – التعليقات – بدن الرسائل ….. الخ )
  • هذا مثال على مدونة تجريبيه : اضغط هنا .
  • بهذه الطريقة ستظهر المدونة بخطوط ويب خاصة في جميع المتصفحات المعروفة إلا فيرفوكس! . نعم الا فيرفوكس للأسف وهذا ما سأبينه في الفقرة التالية . . .



تاسعاً: مشكلة خطوط الويب مع FireFox

بالرغم من أن متصفح فيرفوكس الرائع يعرض خطوط الويب بجودة ممتازة ، إلا أن سياسة مسؤولي هذا المتصفح لا تسمح باستخدام خطوط الويب إلا إذا كانت محفوظة في نفس الموقع الذي ستظهر فيه الخطوط. بتعبير آخر فيرفوكس يرفض عرض خطوط ويب في مدونة بلوقر لأنها محفوظة في موقع آخر. هذه السياسة لأن موزيلا مهتمه بحقوق ملكية الخطوط وهي بذلك تمنع استخدام الخطوط في مواقع أخرى ! ، بالرغم من أن صاحب الموقع الذي يملك حق استخدام خط الويب يمكنه منع استخدام الخط. مع كل تحديث جديد لمتصفح فيرفوكس أترقب الغاء هذه السياسة - المتشددة - ولكن يبدو أن موزيلا متشبثه بها  ...

←←  حسناً هناك بعض المناورات لتجاوز هذه العقبة ستكون بمشيئة الله مادة التدوينة القادمة ..



☼ تحديث:

لحل مشكلة متصفح الفيرفوكس راجع هذه التدوينة: مشكلة: متصفح الفيرفوكس مع خطوط الويب ..

.
.

تحاياي العاطرة :)




التعليقات: 77

رامي الصبحي يقول... 24 مايو، 2012 3:02 ص

موضوع رائع ومرجع شامل

ابداع ابو صهيب ماشاء الله تبارك الله

متابع بشغف


استمــــر

رواد السيد يقول... 24 مايو، 2012 9:11 ص

الإسهاب والتفصيل والشمولية
طريقة الشرح السلسة والمفهومة
المعلومة المفيدة والقيمة
نصائح العارف والخبير والمجرب
التلميحات والتنبيهات المهمة
الأمثلة التطبيقية والعملية
التركيز على الخطوط العربية
التركيز على منصة بلوجر
الجدول والمقارنة
مقدار الجهد المبذول الواضح
التظيم والترتيب والترابط
السؤال والجواب
عرض المشكلة و"المناورات" لحلها
♥♥عندما يجتمع كل هذا في موضوع فاعلم أيها القارئ أنك تقرأ ما يبدعه جاسر الحربي ♥ ♥
اللهم بارك بعلم هذا الرجل وبارك له في ماله وفي صحته
اللهم اجعلها حسنة جارية دائمة اللهم أجره أضعافاً مضاعفة وزد وجد وأكرم .... يا كريم

Abed يقول... 24 مايو، 2012 12:38 م

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

جاسر الحربي يقول... 24 مايو، 2012 5:55 م

السلام عليكم ورحمة الله وبركاته ..

@رامي الصبحي: شكراً لك أبا فصيل ، مستمر إن شاء ربي .

@ Abed : حيا الله مبدعنا البلوقري ، الخط جميل لكنه غير مجاني . مصممي الخطوط المجانية انتجوا كمية لا باس بها

رواد السيد يقول... 26 مايو، 2012 6:10 ص

عندما تأتيك المعلومة المفيدة والقيمة
وتقدم بطريقة مفصلة وشمولية
مع التجربة والتطبيق العملي
ومرفقة بالجداول والمقارنات
وبشكل منظم و مرتب
ومدعومة بالسؤال والجواب
والمشاكل التي يمكن أن تتعرض لها
و"المناورات" لحلها
مع التركيز على اللغة العربية
والتركيز على منصة بلوجر.........
فهي حتماً إحدى إبداعات ♥جاسر الحربي♥
اللهم بارك لجاسر في علمه وماله وصحته فقد نفع بهم عبادك
اللهم اجعلها حسنة جارية وأجره عنها أضعافاً مضاعفة وزد وجد وأكرم ياكريـــم

جاسر الحربي يقول... 26 مايو، 2012 7:56 م

السلام عليكم ورحمة الله وبركاته

جزاك الله عني خيراً يا رواد ، إي والله إني بحاجةٍ الى دعاء الطيبين ... تعطلت لغتي غفر الله لي ولك ...

تحميل برامج مجانية يقول... 30 مايو، 2012 6:36 م

رائع جداً .. موضوع تحفة بجد

جاسر الحربي يقول... 3 يونيو، 2012 6:55 م

@تحميل برامج مجانية: شكراً لك ، وحياك الله :)

عماد يقول... 5 يونيو، 2012 6:28 م

فعلا موضوع رائع وأنا انتظر التكملة الخاصة بالفيرفوكس .. لقد قمت بتغيير مدونتي من الالف الى الياء بتصميم جديد خاص بها وكنت اريد تغيير الخط فقلت يلا ادخل على مدونة البلوقر ففوجئت بهذا الموضوع الرائع .. لذلك ما تتاخر في وضع التكلمة :)

جاسر الحربي يقول... 5 يونيو، 2012 11:58 م

السلام عليكم

أهلاً عماد ، إن شاء الله قريب جداً جداً ، فعلاً تأخرت في ارسالها والله المستعان

غير معرف يقول... 8 يونيو، 2012 3:50 م

السلام عليكم

شرح مميز اخوي جاسر موفق .

جاسر الحربي يقول... 10 يونيو، 2012 9:15 ص

وعليكم السلام ورحمة الله

شكراً لك

King Sherif يقول... 14 يونيو، 2012 2:54 م
أزال المؤلف هذا التعليق.
King Sherif يقول... 14 يونيو، 2012 2:55 م

شرح مميز اخى جاسر
مدونة عرب بلوجر

افلام وثائقية يقول... 17 يونيو، 2012 11:47 م

موضوع قيم

مزيد من الابداع والتألق

تقبل مروري

جاسر الحربي يقول... 18 يونيو، 2012 7:52 ص

حياكما الله ، وأهلاً وسهلاً :)

فهد الفيفي يقول... 20 يونيو، 2012 11:46 ص

السلام عليكم ورحمة الله وبركاته

أشكرك على الموضوع الرائع

لقد أستفدت منه

بارك الله فيك ونفع بك

جاسر الحربي يقول... 23 يونيو، 2012 8:09 ص

وعليكم السلام ورحمة الله وبركاته

العفو أخي الكريم ، وبارك الله فيك :)

.

غير معرف يقول... 29 يونيو، 2012 2:52 م

الله يعطيك العافية على الشرح

جاسر الحربي يقول... 29 يونيو، 2012 5:51 م

الله يعافيك وأهلاً وسهلاً

عماد عادل يقول... 6 أغسطس، 2012 4:13 م

أخ جاسر الحربي
السلام عليكم ورحمة الله وبركاته ... انا اصمم في مدونة تقنية واردت تطبيق خطوط الويب عليها فرفعتها على استضافة خاصة وهي 000webhost وقمت بتطبيق كل شئ لكن الخطوط لم تعمل ولا ادري اين المشكل بالضبط من الامس وانا احاول لكن دون جدوى ولقد استعملت موقع Font Squirrel لتحويل الخطوط فما المشكلة حسب رايك ؟؟؟

جاسر الحربي يقول... 6 أغسطس، 2012 5:46 م

@عماد عادل:

أنصحك بما يلي :

1. استخدم خطوط قوقيل التي في هذه التدوينة ، فهي خطوط ويب مجربة.
2. لا تنسى أن ترفع ملف htaccess الذي في التدوينة اللاحقة ( وضعت رابطها ) وتجعل هذا الملف بجوار ملفات الخطوط.
3. جرب الخطوط الآن ، ان عملت فيعني أن الخطوط التي واجهتك فيها مشاكل غير مناسبة للويب أصلاً .

بالتوفيق

Imed Adel يقول... 6 أغسطس، 2012 6:08 م

انا استخدمت خط GE SS TWO LIGHT
ملف htaccess لم اضفه في نفس المجلد بل في المجلد الرئيسي فقط
ما رايك في عملية التحويل ؟؟ ربما لم يتم التحويل بطريقة جيدة؟؟

سوف اجرب واقولك النتيجة

جاسر الحربي يقول... 6 أغسطس، 2012 6:13 م

ضع ملف htaccess في نفس المجلد بجوار ملفات الخطوط ، جرب الآن !

Imed Adel يقول... 6 أغسطس، 2012 6:51 م

جربت ولم ينفع هذا .... الان لقد قمت بتحميل خط GE SS TWO من موقع عالم التقنية الذي يستعمل هو كذلك الخط وساحوال استعماله واقولك

Imed Adel يقول... 6 أغسطس، 2012 7:31 م

بفففف الامر لم ينفع كذلك

جاسر الحربي يقول... 6 أغسطس، 2012 8:08 م

ههه لا تحرق أعصابك المدونة والإنترنت ما تستاهل ..

أرسل رابط المدونة وكود css الذي كتبته في القالب

عما عادل يقول... 6 أغسطس، 2012 10:30 م

هذه هي المدونة : http://arblab.blogspot.com/ وحاليا لقد نزعت كود الخط ووضعت الكود الي تستعمله انت ... لكن بعد صلاة التروايح سوف اعيده لتعاين المشكل :) وتقبل الله صيامك وصلاتك

جاسر الحربي يقول... 7 أغسطس، 2012 12:45 ص

ما شاء الله يظهر الخط بشكل رائع ، بركات العشاء والتراويح :)

بالتوفيق

Imed Adel يقول... 7 أغسطس، 2012 1:24 ص

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

جاسر الحربي يقول... 7 أغسطس، 2012 1:35 ص

فأما أنا فسياستي عدم حذف الأمثله أو ملفاتها ، ولكن إذا ساءت علاقتي بالاستضافة فمنك العذر :)

Imed Adel يقول... 7 أغسطس، 2012 1:39 ص

لا باس عندها اعيد رفعها :)

Zaid Sameer Jihad يقول... 10 أغسطس، 2012 7:42 م

لقد أبرعت فيما شرحت
تحياتي لك
iraqdroid.blogspot.com

جاسر الحربي يقول... 11 أغسطس، 2012 7:58 م

ولك تحية مثلها أخي زيد ، شرفني مروك فأهلاً بك

Ahmed Mahmoud يقول... 24 أغسطس، 2012 7:39 ص

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

و أكون شاكر ليك جدا

جاسر الحربي يقول... 25 أغسطس، 2012 11:08 م

أهلاً أحمد

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

سأحاول التلخيص:

1. توفير الخطوط : أسهل طريقة هو تنزيل خطوط ويب من مواقع تستخدمها ، يمكنك استخدام اداة firebug أو مجرد الاطلاع على الكود المصدري للصفحة.

2. ترفع خطوط الويب على استضافة مناسبة. تقبل الروابط المباشرة مثل دروبوكس.

3. جلب الخطوط باستخدام خاصية @font-face .

4. الآن الخطوط في مدونتك نسق اي جزء من مدونتك باعطائها اسم الخط المطلوب من خلال css .


وأهلاً بك دوماً :)

مدزنة عربي كاش2 يقول... 2 سبتمبر، 2012 7:21 م

ياسلام موضوع اقل ما أقوله عنه انه يحاتج الى 1000 تعليق والف شكر
موضوع حصري ,لاني كنت دائما اشاهد المدونات واجد فيها خطوط متميزة عن باقي الخطوط ولا ادري كيف يتم ادرجها فيها او اضافتها للقالب حاولت دلك بتغيير الخط في مدونتي لكنه ليس منسق او متادخل وعلمت مند لحظات انه يجب ادراجه في القالب شكرا لك

جاسر الحربي يقول... 3 سبتمبر، 2012 12:32 م

السلام عليكم

أهلاً بك أخي العزيز شاكر لك طيب قولك ، وحياك الله دائماً

نفع الله بك

King Sherif يقول... 4 سبتمبر، 2012 7:34 م

فعلا موضوع رائع جدا جدا جدا جدا وتم التطبيق بنجاح

جاسر الحربي يقول... 5 سبتمبر، 2012 1:56 م

السلام عليكم

ما شاء الله مبروك ، وظفتها بشكل جيد :)

ياسين يقول... 7 أكتوبر، 2012 2:57 ص

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

تحياتي لكم

جاسر الحربي يقول... 7 أكتوبر، 2012 6:06 ص

وعليكم السلام

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

عبد المجيد الملحم يقول... 31 أكتوبر، 2012 1:05 ص


أهنيك يا جاسر على هذ الشرح الوافي وعلى الحصيلة العلمية الي تمتلكها
وعلى الصياغة البلاغية الجميلة بإيصال المعلومة
ألف شكر لك والله يزوجك ولا يحرمك الأجر : )

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

جاسر الحربي يقول... 31 أكتوبر، 2012 10:18 ص

اهلاً وسهلاً عبدالمجيد

شكراً لك أولاً ، ثم إن هذا الخط لا يتطلب هذه الطريقة لأنه متوفر في كل جهاز ، كل ما عليك هو تحديد نوع الخط كخط افتراضي للقسم الذي تريد تنسيقه ، وكيف تعرف هذا القسم بالنظر الى قيمة الـ ID أو الـ Class ثم تكتب فيه هذا السطر:

font-family: Simplified Arabic;

عبد المجيد الملحم يقول... 31 أكتوبر، 2012 1:47 م

لا أعرف من أين استطيع معرفة قيمة الـ ID أو الـ Class

طريقتي البدائية
هي أني من قالب البلوقر أذهب لتحرير HTML ثم أنسخ القوالب
والصقها في الفرونت بيج 2003 وأجري التعديلات المطلوبة

ونادراً ما أفلح في تغير شكل ما أو قالب
( فقد أتبعت حرفياً كل ماجاء في الدرس هذا ولم أفلح لسبب لا أعرفه )
لأنه في المعاينة بالبرونت بيج لا يظهر البلوقر كما أنه ترد رسالة بأخطاء سطرية مع أن القالب هو الافتراضي ولم أجري فيه أية تعديلات


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


مع أنها تظهر في قائمة الخطوط من مصمم النماذج فمتقدم فنص الصفحة !!



شكراً الله لك سعيك يا الجاسر

جاسر الحربي يقول... 31 أكتوبر، 2012 2:22 م

حياك الله

لا الفرونت بيح لا يمكن يعرض معاينة لقالب بلوقر للأسف ؛ لان قالب بلوقر مبي بلغة xml تترجم في المتفصحات كـ HTML ...

لا سبيل لتتمكن من التعديل في تنسيق المدونة بثقة إلا بقضاء ايام قليلة في تعلم HTML , CSS وربما يوم واحد يكفي ..

تحاياي

عبد المجيد الملحم يقول... 31 أكتوبر، 2012 2:42 م
أزال المؤلف هذا التعليق.
Arqam Amine يقول... 25 نوفمبر، 2012 3:22 م

موضوع رائع يا أخي
الله يعطيك الصحة

جاسر الحربي يقول... 26 نوفمبر، 2012 11:10 ص

آركام : الله يبارك فيك ويوفقك ، مدونتك جميلة بالمناسبة وفريدة بمحتواها

عمر بن عبد الله يقول... 2 ديسمبر، 2012 12:14 ص

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

جاسر الحربي يقول... 2 ديسمبر، 2012 12:23 م

شكراً لك عمر ، وبارك الله فيك كذلك

www.eg4os.com يقول... 16 ديسمبر، 2012 12:32 م

موضوع رائع وشرح وافى
www.eg4os.com

جاسر الحربي يقول... 18 ديسمبر، 2012 9:47 ص

شكراً لك ، حياك ربي

غير معرف يقول... 29 ديسمبر، 2012 5:54 ص

شكرا لك

عرب كول يقول... 29 ديسمبر، 2012 7:35 م

جميل جدا تقبل مروري

جاسر الحربي يقول... 30 ديسمبر، 2012 10:14 ص

@غير معرف: العفو ..

عرب كول: أهلاً بك

big barsa يقول... 13 يناير، 2013 2:54 ص

ماشاء الله شكر لك أخي

Omar Ramadan يقول... 16 يناير، 2013 12:03 ص

موضوع جميل جدا
http://www.moso3te.com/
http://www.donyaweden.com/

hossam elsaban يقول... 16 فبراير، 2013 5:11 م

ما هو اسم الخط الذي تستخدمه ت1

جاسر الحربي يقول... 17 فبراير، 2013 8:28 ص

السلام عليكم

حياكم الله إخواني ع4

@حسام: Arial خط عادي جداً

khott يقول... 7 مارس، 2013 7:34 ص

موضوع شامل, بارك الله فيك..

khott يقول... 17 مارس، 2013 9:38 م

هنا 10 خطوط ويب جاهزة للتحميل والإستخدام على موقعك:
http://www.ta3rip.com/download-10-arabic-web-fonts.html

chahine DZ يقول... 27 مارس، 2013 9:26 م

السلام عليكم
حقيقتا الموضوع رائع يستحق الشكر
عندي مشكلة لو الأخ جاسر يساعدني فيها
المشكلة :
وضعت الكود الذي أنت واضعه في الشرح فوق هذا الكود
]]>


وعند ذهابي لصفحة إنشاء مدونة جديدة لم يظهر لي هذين الخطين في قائمة الخطوط حيث بقية كما كانت (الخطوط العادية)

chahine DZ يقول... 27 مارس، 2013 9:27 م

الكود
]]>

chahine DZ يقول... 27 مارس، 2013 9:28 م

الكود لا يظهر (الكود الذي أنت واضعه فالشرح)

جاسر الحربي يقول... 28 مارس، 2013 11:08 ص

ارسلي :

رابط المدونة ، والكود الذي استخدمته يمكنك ارفاق الكود ولكن بعد تشفيرها فوق مربع الرد هناك أداة "ترميز html " استفد منها ثم الصق الكود.

chahine DZ يقول... 30 مارس، 2013 4:39 م

أولا شكرا على ردك، وزادك الله في علمك
ثانيا يجب أن أحيطك علما بأن المدونة جديدة ولم أضع فيها حتى مشاركة أنا وضعت لها قاب عربي (حملته من أحد المدونات العربية) الآن ما يخص الكود :
أنا أريد الخطوط اللي أنت واضعها في الشرح لذالك وضعت الكود اللي فالشرح
@font-face {
font-family: 'DroidKufi-Bold';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Bold.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Bold.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Bold.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Bold.ttf') format('truetype');}

@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}

@font-face {
font-family: 'DroidNaskh-Bold';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Bold.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Bold.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Bold.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Bold.ttf') format('truetype');}

@font-face {
font-family: 'DroidNaskh-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidNaskh-Regular.ttf') format('truetype'); }

قبل هذا الكود
]]> </b:template-skin>

لكن أنا عندي في القالب عندما أبحث عن الكود هدا أجد إثنان هما
الأول
]]></b:skin>

<b:template-skin>
الثاني
]]>
</b:template-skin>
ومع ذلك وضعته مرة فوق الأول ولم يظهر الخطين، وفوق الثاني ولم يظهر الخطين
أظن أني أكثرت عليك .......

جاسر الحربي يقول... 30 مارس، 2013 7:32 م

أخي ... أرسل لي القالب الذي استخدمته مضغوطاً عبر نموذج الاتصال

chahine DZ يقول... 31 مارس، 2013 2:05 ص

تم الإرسال .......شكرا جزيلا لك.....وعذرا على اكثاري علك

جاسر الحربي يقول... 31 مارس، 2013 7:30 م

الطريقة التي اتبعتها صحيحة وهي وضع هذا الكود قبل:

[code]]]></b:skin>[/code]

هذه الخطوة مهمتها "تضمين" الخطوط فقط في القالب ، ولن يظهر شيء مالم تقم بفعل الخطوة الثانية وهي:

تطبيق هذه الخطوط في الأجزاء التي تريد تطبيقها فيها ، وذلك من خصائص css ، أرجو أنك قادر على التعامل مع css وإلا فلن تتمكن من تنسيق قالبك !!

chahine DZ يقول... 2 أبريل، 2013 12:17 ص

حقيقتا أنا لا أعرف التعامل مع خصائص css ولكن سأبحث عنها
أكرر لك شكري مرة ثانيا

Oussama Bouyardane يقول... 7 أبريل، 2013 4:00 ص

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

khott يقول... 16 أبريل، 2013 7:30 ص

السلام عليكم,

مكتبة خطوط الويب العربية:
http://www.ta3rip.com/download-arabic-web-fonts

amani يقول... 17 يوليو، 2014 9:44 ص

"جامعة المدينة العالمية بماليزيا.
http://www.mediu.edu.my/ar/"

مملكة العلوم يقول... 11 فبراير، 2015 3:09 ص

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

مملكة العلوم يقول... 11 فبراير، 2015 3:20 ص

أخي جاسر حاولت مع هذا الخط لعجزت ومارضي يزبط معي طلعني من ثيابي وأنا هالخط حابو كتير وبدي حطو بمدونتي ممكن تشتغلي علي وتعطيني الفونت فيس لهالخط رابط الخط https://www.dropbox.com/s/meo0hc5ispkdfk4/al-hadith1.TTF?dl=0 وإذا في مجال هالخط كمان
https://www.dropbox.com/s/8lbhmwgs9b21lw1/Mohareb%203.ttf?dl=0

Mo7ammed يقول... 6 نوفمبر، 2015 9:05 ص

ماشا الله , استفدت جداً والله , جزاك الله خيييير

إرسال تعليق



تابع صفحتنا في شبكة قوقيل بلس واقترحها :

تابع صفحتنا في الفيسيبوك:

ليصل جديدنا إلى بريدك تفضل بالاشتراك