|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
06-06-2013, 11:39 PM | #1 | ||||||||
مدون نشيط
|
الطريقه الصحيحه والكامله لتغير خط مدونتك لاى خط يعجبك
هل زرت موقع ما مثل طريق الإسلام وأعجبتك الخطوط المميزة والفريدة المستخدمه فيه ؟. إن استخدام خطوط مخصصة لمدونتك لا شك سيضيف لشخصيتها نكهه خاصة ويضيف لجمالها وحسنها قيمة الأصالة التي يتمتع بها الخط العربي أجمل خطوط الدنيا ! . ثورة خطوط الويب بدأت حسب متابعتي بعد اطلاق قوقيل مكتبة خطوط الويب المجانية، التي للأسف حتى الآن لا تدعم اللغة العربية. في هذا التدوينة سأحاول توضيح كيفية استخدام خطوط خاصة لمدونتك ، وكيف نستثمر الخطوط العربية الحاسوبية المجانية بتحويلها وتهيئتها لنستخدمها كخطوط ويب ، وكالعادة ستكون منصة بلوقر هي المعنية بشكل رئيسي؛ لأنها بحاجة الى تعامل خاص كما سيأتي إن شاء الله . سأحاول قدر جهدي توضيح الآلية بشكل أكثر شمولية. ولنفتح النفسية هذا مثال على خطوط درويد نسخ و درويد كوفي وهي مخصصة لنظام اندرويد قمت باعدادها لتناسب الويب : اضغط هنا . وان شئت تنزيل المثال على حاسوبك اضغط هنا . ان أعجبتك الفكرة وتحمست فباسم الله نبدأ ، اعلم أولاً أن طول هذه التدوينة ليس لأن الموضوع صعب بل هو يسير جداً ولكن الاستطراد ونثر التنبيهات ضروري وبمجرد تطبيقك مرة أو مرتين ستصبح الطريقة يسيره جداً . . . أولاً: كيف تتعامل المتصفحات مع الخطوط ؟ نَعلمُ أن المتصفح يُظهر الموقع حسب التعليمات والخصائص التي يكتبها المصمم في ورقة الأنماط CSS ، وورقة الأنماط أيضاً تحدد اسم الخط وخصائصه كالمقاس واللون. الخطوط هي عبارة عن ملفات قابعة في حاسوب زائر الموقع، فلو اختار مصمم الموقع الخط ( Arial ) فسيكتب اسمه في خصائص الأنماط CSS وبهذا سيطلب المتصفح هذا الخط من مكتبة الخطوط في حاسوب زائر الموقع، فإذا وجد هذا الخط سيتم عرضه بشكلٍ سليم، وان لم يوجد سيعرض المتصفح الموقع بخط آخر وغالباً سيكون ( tahoma ). وتحسباً لإمكانية عدم وجود الخط المطلوب فإن المصمم يكتب أسماء ثلاثة خطوط أو أكثر يتم طلبها حسب ترتيبها فإذا لم يوجد الخط الأول يعرض الخط الثاني وإذا لم يوجد الثاني يطلب الثالث وهكذا . . . في مدونات بلوقر غالباً نحدد اسم الخط بكتابة سطر كهذا: اقتباس:
لا تنسى أن الخط arial عبارة عن ملف موجود في حاسوب الزائر ، ولكون هناك احتمال عدم وجود الخط أو أي خلل آخر، فيفضل كتابة أكثر من خط ، مثلاً: اقتباس:
تلميح: إذا احتوى اسم الخط على مسافة فارغه فيجب كتابة علامة تنصيص على جانبي اسم الخط . . . ثانياً: أشهر أنواع صيغ الخطوط web fonts formats على مر الأيام طورت شركات مثل ميكروسوفت وآبل وأدوبي خطوط بصيغ مختلفة. اليوم هناك صيغ كثيرة للخطوط ، سأذكر أربعة منها وهي التي لا يسعنا جهلها ، وهي: 1. TrueType - ttf: من تطوير آبل وهي الصيغة الأشهر، ولن يخلو نظام حاسوبي إلا وفيه عدد كبير من الخطوط بهذه الصيغة، وستجد عدد كبير من الخطوط العربية المتوفرة في الشبكة العالمية بهذه الصيغة ... للاستزاده. 2. OpenType – otf: هي امتداد لصيغة TrueType وما فهمته أن هذا النوع يحتوي على حزمة حروف أكبر وبالتالي أكثر قدرة على عرض وطباعة الحروف مع دعم أفضل للغات المختلفة ! وهو نتيجة تعاون بين أدوبي وميكروسوفت. للاستزاده. 3. Embedded OpenType – eot: اشتقتها ميكروسوفت من صيغة من OpenType، هذه الصيغة حصرية لمتصفح إنترنت اكسبلورر. هذا النوع قد يحتوي على عناوين لمواقع محددة يعمل لها فقط، لحفظ الحقوق طبعاً!. البعض يعتقد أن هذه الصيغة من الخطوط يمكن تجاهلها ولكن هذا خطأ فادح ( حتى هذا اليوم ) لأن انترنت اكسبلورر الثامن IE8 ما زال هو المهيمن. 4. WebOpen Font Format – woff: هذه الصيغة في حقيقتها مجرد وعاء لـ TrueType أو OpenType ، ولكن هذا الوعاء مضغوط ليحقق حجم أقل ليناسب متطلبات المواقع من ناحية سرعة عرض الخطوط، بالإضافة إلى أن هذه الصيغة تحتوي على معلومات أساسية MetaData عن الخط مثل المصنع ورخصة الاستخدام ! لذلك هي الصيغة التي توصي بها رابطة الشبكة العالمية W3C . وهي الصيغة هي التي تسعى جميع المتصفحات لدعمها. تلميح:
قمت بتجربة مختلف صيغ الخطوط على أشهر المتصفحات وكتبت النتائج في الجدول التالي: ← مع الإشارة الى التالي:
الخطوط أيها المبارك تماماً مثل البرامج فيها المجاني وفيها المدفوع ، أنا عن نفسي تفاجأت بأسعارها العالية ! ، تنتشر كثير من روابط الخطوط المقرصنة المشتهره، وخلال بحثي وجدت أن في الخطوط المجانية الكفاية. غالباً ستجد الخط متوفرة بالصيغة TTF أو OTF ، وبما أنها كالبرامج فالبحث عنها وايجادها سيكون باتباع الطرق المعتاده، مثلاً :
فالمسألة إذاً متعلقة بمهارتك في البحث عن المعلومة خلال الإنترنت. وأمر من المهم أن تدركه وهو ← الخط الذي ستجده قد لا يعمل كخط ويب غالباً ويحتاج تهيئة بالادوات التي سأعرضها لاحقاً ، وربما لن نستطيع تحويل الخط البته كونه حصري لبرامج مثل الفوتوشوب مثلاً. خامساً: أين أجد الصيغ الأخرى مثل eot و woff ؟ حسناً إذا وجدت الخط بصيغة ttf أو otf فهذا يكفي ، وسنستخدم أدوات وبرمجيات صغيرة للتحويل الى الصيغ الأخرى. وقبل أن نقوم بعملية التحويل يجب أن نتأكد من أن الخط ttf يعمل بشكل سليم على المتصفح كخط ويب؛ فأحياناً يظهر بحروف غير متصلة، والحل يكون يتحويل ttf إلى ttf ولكن الملف الناتج ورغم أنه بنفس الصيغة الا انه بمشيئة الله سيكون بحروف متصلة وسليمه. الآن سأعرض بعض المحولات التي جربتها ، مثل : الأدوات:
المواقع:
تنبيه:
مثل ملفات الجافا وغيرها فإن ملفات خطوط الويب بحاجة للحفظ في موقع يوفر روابط مباشرة HotLink لربطها بالمدونة ، حسناً سأعيد كتابة أفضل ثلاثة مواقع يمكن الاعتماد عليها:
سنفترض الآن أننا لدينا خط ويب جميل للمدونة بثلاث صيغ ( TTF – WOFF – EOT ) ، ومرفوع على أحد المواقع. الآن سنستخدم CSS3 لتضمين هذا الخط الجميل في قالب المدونة ونعطيه اسماً ، وبهذا سيكون هذا الخط تحت رهن الإشارة لننسق به خطوط أي جزء من المدونة … تضمين الخط في القالب: في الجزء الخاص بأنماط المدونة أي CSS ، نبحث عن السطر : اقتباس:
اقتباس:
اقتباس:
اقتباس:
قبل استخدام خط الويب الخاص بمدونتك، أفضل تنسيق خطوط المدونة بالخطوط الأساسية مثل arial أو tahoma وغيرها ، ثم بعد الانتهاء من ذلك قم بكتابة اسم خط الويب الخاص قبلها في الترتيب ؛ وهذا حتى في حال تعطل خط الويب لأي سبب يكون التنسيق الأساسي هو الذي يتحكم بمظهر المدونة. وبالتالي لو افترضت أني ساستخدم خط أساسي هو airal وخط ويب هو demo فسأكتب الخصائص كالتالي: اقتباس:
حسناً سنحاول الآن اجراء تطبيق عملي لاستخدام خطوط درويد نسخ ودرويد كوفي ، وتحويلها ومن ثم تضمينها قالب المدونة :
اقتباس:
اقتباس:
انتى. منقوووووووووووووووووووووووووووول المصدر : http://www.alblogger.com/2012/04/webfonts.html
__________________
عالم مشكله الساخر كن من متابعينا وشوف احلى الكوميك والنكت والفيدوها والبرامج والمقالات الساخره وعيش مع اكبر موسوعه للسخريه :) http://moshkla1.blogspot.com/ |
||||||||
06-07-2013, 03:54 AM | #2 |
مدون مميز
تاريخ التسجيل: May 2012
الدولة: تونس
المشاركات: 874
|
رد: الطريقه الصحيحه والكامله لتغير خط مدونتك لاى خط يعجبك
الطريقة صارت قديمة في المواقع لن يكون لها أي نفع.... إنتظر طريقتي أنا الجديدة !
__________________
Arabic Labs | المختبرات العربية أفضل مكان لتعلم المهارات الإبداعية والفنية مثل تطوير وتصميم المواقع الإلكترونية، (وغيرها الكثير). http://www.arabiclabs.com |
06-07-2013, 11:41 PM | #3 |
مدون نشيط
|
رد: الطريقه الصحيحه والكامله لتغير خط مدونتك لاى خط يعجبك
الطريقه فعلن قديم ولكن ممكن تشتغل على مدونات البلوجر :) وثانيا الموضوع فى قدر كبير جدا من المعلومات المفيده
__________________
عالم مشكله الساخر كن من متابعينا وشوف احلى الكوميك والنكت والفيدوها والبرامج والمقالات الساخره وعيش مع اكبر موسوعه للسخريه :) http://moshkla1.blogspot.com/ |
06-21-2013, 07:42 AM | #4 |
مدون جديد
تاريخ التسجيل: Jan 2013
المشاركات: 43
|
رد: الطريقه الصحيحه والكامله لتغير خط مدونتك لاى خط يعجبك
__________________
|
06-21-2013, 06:58 PM | #5 |
مدون جديد
تاريخ التسجيل: May 2013
المشاركات: 16
|
رد: الطريقه الصحيحه والكامله لتغير خط مدونتك لاى خط يعجبك
__________________
|
06-21-2013, 11:29 PM | #6 |
مدون جديد
تاريخ التسجيل: May 2013
المشاركات: 15
|
رد: الطريقه الصحيحه والكامله لتغير خط مدونتك لاى خط يعجبك
__________________
http://www.walaa-saffarini.com/ |
06-22-2013, 08:57 PM | #7 | |||
مدون نشيط
|
رد: الطريقه الصحيحه والكامله لتغير خط مدونتك لاى خط يعجبك
اقتباس:
اقتباس:
اقتباس:
__________________
عالم مشكله الساخر كن من متابعينا وشوف احلى الكوميك والنكت والفيدوها والبرامج والمقالات الساخره وعيش مع اكبر موسوعه للسخريه :) http://moshkla1.blogspot.com/ |
|||
06-23-2013, 07:25 PM | #8 |
مدون مميز
تاريخ التسجيل: May 2012
الدولة: تونس
المشاركات: 874
|
رد: الطريقه الصحيحه والكامله لتغير خط مدونتك لاى خط يعجبك
__________________
Arabic Labs | المختبرات العربية أفضل مكان لتعلم المهارات الإبداعية والفنية مثل تطوير وتصميم المواقع الإلكترونية، (وغيرها الكثير). http://www.arabiclabs.com |
06-25-2013, 02:57 AM | #9 | |
مدون نشيط
|
رد: الطريقه الصحيحه والكامله لتغير خط مدونتك لاى خط يعجبك
اقتباس:
بس عارف اى الفرق الوحيد بين لطرقتين ان طرقتك حلت مشكله الفايرفوكس لان استخدمتbase64 صح انا الحقيقه كنت عارف base64 بس مش كنت عارف الشفره بتاعت font face بس بجد تسلم
__________________
عالم مشكله الساخر كن من متابعينا وشوف احلى الكوميك والنكت والفيدوها والبرامج والمقالات الساخره وعيش مع اكبر موسوعه للسخريه :) http://moshkla1.blogspot.com/ |
|
06-25-2013, 03:58 AM | #10 |
مدون جديد
تاريخ التسجيل: Jun 2013
المشاركات: 13
|
رد: الطريقه الصحيحه والكامله لتغير خط مدونتك لاى خط يعجبك
__________________
|
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
الصحيحه, الطريقه, والكامله |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
الطريقه السحريه لفتح حساب ادسنس في خلال ساعتين بدون موقع | مى محمد | الربح عن طريق أدسنس | 0 | 03-23-2013 06:56 PM |
اريد شرح مصور لتغير دومين المدونه الي دومين .tk المجاني | minicheetos | دروس بلوجر | 0 | 11-22-2012 09:16 AM |
الطريقه المثلي لجعل ارشفه المدونات سريعه | osama | دروس التسويق والاشهار | 4 | 09-05-2012 10:07 PM |
الساعة الآن 03:10 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |