دعم وتطوير منتديات vBulletin و تطوير المواقع كل ما يحتاجه منتداك لتطويره وتميزه

إضافة رد
 
أدوات الموضوع انواع عرض الموضوع
قديم 07-23-2015, 03:46 PM   #1




الصورة الرمزية تركي
تركي غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 58
 تاريخ التسجيل :  Jan 2014
 أخر زيارة : 08-07-2016 (01:59 AM)
 المشاركات : 486 [ + ]
 التقييم :  250
 
لوني المفضل : Cadetblue
افتراضي تغييير الخط للإستايل عن طريق css3



السلام عليكم ورحمة الله وبركاته
هذا الموضوع من المفترض اطرحه قبل اشهر لكن كان عندي اكثر من ظرف والحمد لله على كل حال واعتذر على التأخير
بداية عندنا الكثير من انواع من الخطوط وكل نوع يتوافق مع متصفح والبعض الاخر يتوافق مع اكثر من متصفح
EOT: لانترنت اكسبلورير ابتداءً من نسخة 6
WOFF: فيرفوكس 3.6 فما فوق، انترنت اكسبلورير نسخة 9 فما فوق، سفاري 5.1 فما فوق و كروم 6 فما فوق
TTF: سفاري 3-5، كروم 4 فما فوق، فيرفوكس 3.5، و اوبيرا 10 فما فوق.
نبحث عن الخط بأحد هذه الصيغ
ويفضل الخط يكون بصيغتين صيغة EOT هالصيغة داعمة للإنترنت اكسبلور والصيغة الثانية WOFF يكون للمتصفحات الاخرى
طريقة التركيب في الموقع
اولا رفع الخطوط على الاستضافة ويفضل داخل مجلد الاستايل
او الحصول على رابط الخط (رابط مباشر ) مثلا على القوقل داريف او على قوقل سايت او اي موقع يوفر رابط مباشر للملف
اضافة هالكود في تعاريف CSS الإضافية
كود PHP:
@font-face {
font-family'DTHULUTH';
srcurl('font/DTHULUTH.eot'),
url('font/DTHULUTH.woff'format('woff');

هذا شرح الكود
شرح الكود:
@font-face: لإعلام النظام اننا نريد تضمين خط.
font-family: لتحديد الاسم الذي سندعو الخط به يفضل يكون قريب من اسم الخط او نفس الاسم
src: url('xxx.eot')'): هنا نحدد للنظام نوع خط، ونحدد صيغتة و مسارة ايضاً.او نكتب رابط الخط المباشر
url('xxx.woff') format('woff'): هنا ايضا خط اخر بزيادة التوافق مع ذكر المسار.او الرابط المباشر
في حال عندنا اكثر من صيغة للخط طيب لو عندنا صيغة او امتداد واحد
@font-face {
font-family: 'اسم الخط ';
url('xxx.woff') format('woff');
}
نقرتين لعرض الصورة في صفحة مستقلة
كذا نتهينا من اول جزء
الان نسطيع استخدام الخط في اي مكان في المنتدى
مثلا في صندوق التحرير
نقرتين لعرض الصورة في صفحة مستقلة
او مثلا في اسماء الأقسام
نعمل مثلا هالكلاس
<div class="gg">
المنتدى العام
</div>
نضع التعريفات بالشكل هذا في تعاريف CSS الإضافية
.gg {
text-align: center;
font-size: 50px;
font-family: هنا نضع اسم الخط ;
}
نقرتين لعرض الصورة في صفحة مستقلة
_________________.
نقرتين لعرض الصورة في صفحة مستقلة
ممكن استخدامها في اي مكان في المنتدى
بإستخدام هذه الطريقة لا يتوجب تثبيت الخط على جهاز العضو أو الزائر
يفضل عدم استخدام خطوط كثيرة على الاستايل لان هالخطوط يتم تحميلها على جهاز الزائر
لو فرضنا استخدمت مثلا 6 خطوط وكان حجم كل خط تقريبا 70 كيلو الحجم الكلي للخطوط اكثر من 400 كيلو ممكن يسبب تأخير في تحميل الصفحة (ثقل في التصفح )
يوجد اكثر من صيغة للخطوط تستطيع تركيبها لكن هالصيغ الموجودة في الموضوع تعطي اقل حجم للخط بعض
بأذن الله بحدث الموضوع ويتم ارفاق اكثر من خط


 
 توقيع : تركي

نقرتين لعرض الصورة في صفحة مستقلة


رد مع اقتباس
قديم 07-23-2015, 08:24 PM   #2




الصورة الرمزية الجنوبيه
الجنوبيه متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 1
 تاريخ التسجيل :  Jun 2013
 أخر زيارة : يوم أمس (08:23 PM)
 المشاركات : 12,312 [ + ]
 التقييم :  957
 الدولهـ
Saudi Arabia
 الجنس ~
Female
 
 MMS ~
MMS ~
 SMS ~
لا إله إلا أنت سبحانك
إن كنت من الظالمين
حسبيا الله عليه توكلت وهو رب العرش
العظيم
لوني المفضل : Sienna
افتراضي رد: تغييير الخط للإستايل عن طريق css3



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


 
 توقيع : الجنوبيه

[CENTER]رَبِّ أَوْزِعْنِي أَنْ أَشْكُرَ نِعْمَتَكَ الَّتِي أَنْعَمْتَ عَلَيَّ وَعَلَىٰ وَالِدَيَّ
وَأَنْ أَعْمَلَ صَالِحًا تَرْضَاهُ
وَأَصْلِحْ لِي فِي ذُرِّيَّتِي ۖ
إِنِّي تُبْتُ إِلَيْكَ وَإِنِّي مِنَ الْمُسْلِمِينَ


رد مع اقتباس
قديم 07-24-2015, 12:19 AM   #3





الصورة الرمزية شموخ
شموخ غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 18
 تاريخ التسجيل :  Jul 2013
 أخر زيارة : 02-27-2026 (02:25 AM)
 المشاركات : 1,385 [ + ]
 التقييم :  651
 الدولهـ
Saudi Arabia
 الجنس ~
Female
 
 MMS ~
MMS ~
 SMS ~
سبحانه الله وبحمده
سبحان الله العظيم
لوني المفضل : Darkseagreen
افتراضي رد: تغييير الخط للإستايل عن طريق css3



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


 
 توقيع : شموخ

نقرتين لعرض الصورة في صفحة مستقلة


رد مع اقتباس
قديم 06-12-2016, 01:36 AM   #4






الصورة الرمزية احمد المهاجر
احمد المهاجر متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 315
 تاريخ التسجيل :  Apr 2016
 أخر زيارة : 02-14-2019 (12:12 PM)
 المشاركات : 350 [ + ]
 التقييم :  15
 
 MMS ~
MMS ~
لوني المفضل : Cadetblue
افتراضي رد: تغييير الخط للإستايل عن طريق css3



جزاك الله خير الجزا

ستاذ تركي

وجعلك في موزين احسانك يارب


 

رد مع اقتباس
إضافة رد

مواقع النشر

الكلمات الدليلية
للإستايل , الخط , css3 , تغييير , طريق


يتصفح الموضوع حالياً : 1 (0 عضو و 1 ضيف)
 

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
الخطوط المناسب للاستايل ابوفهد ملحقات الفيتوشوب والتصاميم 6 09-25-2014 06:15 PM

تصميم &الجنوبيه& مقدم من منتديات طموح ديزاين

RSS RSS 2.0 XML MAP HTML

الساعة الآن 07:00 PM.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2026, vBulletin Solutions Inc.
هذا الموقع يتسخدم منتجات Weblanca.com
HêĽм √ 3.1 BY: ! ωαнαм ! © 2010
Ads Organizer 3.0.3 by Analytics - Distance Education

جميع آلمشآركآت آلمكتوبه تعبّر عن وجهة نظر صآحبهآ , ولا تعبّر بأي شكل من آلأشكآل عن وجهة نظر إدآرة آلمنتدى