تركي
07-23-2015, 03:46 PM
السلام عليكم ورحمة الله وبركاته
هذا الموضوع من المفترض اطرحه قبل اشهر لكن كان عندي اكثر من ظرف والحمد لله على كل حال واعتذر على التأخير
بداية عندنا الكثير من انواع من الخطوط وكل نوع يتوافق مع متصفح والبعض الاخر يتوافق مع اكثر من متصفح
EOT: لانترنت اكسبلورير ابتداءً من نسخة 6
WOFF: فيرفوكس 3.6 فما فوق، انترنت اكسبلورير نسخة 9 فما فوق، سفاري 5.1 فما فوق و كروم 6 فما فوق
TTF: سفاري 3-5، كروم 4 فما فوق، فيرفوكس 3.5، و اوبيرا 10 فما فوق.
نبحث عن الخط بأحد هذه الصيغ
ويفضل الخط يكون بصيغتين صيغة EOT هالصيغة داعمة للإنترنت اكسبلور والصيغة الثانية WOFF يكون للمتصفحات الاخرى
طريقة التركيب في الموقع
اولا رفع الخطوط على الاستضافة ويفضل داخل مجلد الاستايل
او الحصول على رابط الخط (رابط مباشر ) مثلا على القوقل داريف او على قوقل سايت او اي موقع يوفر رابط مباشر للملف
اضافة هالكود في تعاريف CSS الإضافية
@font-face {
font-family: 'DTHULUTH';
src: url('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');
}
https://www.g-tmooh.com/up/do.php?img=1074 (https://www.g-tmooh.com/up/)
كذا نتهينا من اول جزء
الان نسطيع استخدام الخط في اي مكان في المنتدى
مثلا في صندوق التحرير
https://www.g-tmooh.com/up/do.php?img=1073 (https://www.g-tmooh.com/up/)
او مثلا في اسماء الأقسام
نعمل مثلا هالكلاس
<div class="gg">
المنتدى العام
</div>
نضع التعريفات بالشكل هذا في تعاريف CSS الإضافية
.gg {
text-align: center;
font-size: 50px;
font-family: هنا نضع اسم الخط ;
}
https://www.g-tmooh.com/up/do.php?img=1075 (https://www.g-tmooh.com/up/)
_________________.
https://www.g-tmooh.com/up/do.php?img=1076 (https://www.g-tmooh.com/up/)
ممكن استخدامها في اي مكان في المنتدى
بإستخدام هذه الطريقة لا يتوجب تثبيت الخط على جهاز العضو أو الزائر
يفضل عدم استخدام خطوط كثيرة على الاستايل لان هالخطوط يتم تحميلها على جهاز الزائر
لو فرضنا استخدمت مثلا 6 خطوط وكان حجم كل خط تقريبا 70 كيلو الحجم الكلي للخطوط اكثر من 400 كيلو ممكن يسبب تأخير في تحميل الصفحة (ثقل في التصفح )
يوجد اكثر من صيغة للخطوط تستطيع تركيبها لكن هالصيغ الموجودة في الموضوع تعطي اقل حجم للخط بعض
بأذن الله بحدث الموضوع ويتم ارفاق اكثر من خط
هذا الموضوع من المفترض اطرحه قبل اشهر لكن كان عندي اكثر من ظرف والحمد لله على كل حال واعتذر على التأخير
بداية عندنا الكثير من انواع من الخطوط وكل نوع يتوافق مع متصفح والبعض الاخر يتوافق مع اكثر من متصفح
EOT: لانترنت اكسبلورير ابتداءً من نسخة 6
WOFF: فيرفوكس 3.6 فما فوق، انترنت اكسبلورير نسخة 9 فما فوق، سفاري 5.1 فما فوق و كروم 6 فما فوق
TTF: سفاري 3-5، كروم 4 فما فوق، فيرفوكس 3.5، و اوبيرا 10 فما فوق.
نبحث عن الخط بأحد هذه الصيغ
ويفضل الخط يكون بصيغتين صيغة EOT هالصيغة داعمة للإنترنت اكسبلور والصيغة الثانية WOFF يكون للمتصفحات الاخرى
طريقة التركيب في الموقع
اولا رفع الخطوط على الاستضافة ويفضل داخل مجلد الاستايل
او الحصول على رابط الخط (رابط مباشر ) مثلا على القوقل داريف او على قوقل سايت او اي موقع يوفر رابط مباشر للملف
اضافة هالكود في تعاريف CSS الإضافية
@font-face {
font-family: 'DTHULUTH';
src: url('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');
}
https://www.g-tmooh.com/up/do.php?img=1074 (https://www.g-tmooh.com/up/)
كذا نتهينا من اول جزء
الان نسطيع استخدام الخط في اي مكان في المنتدى
مثلا في صندوق التحرير
https://www.g-tmooh.com/up/do.php?img=1073 (https://www.g-tmooh.com/up/)
او مثلا في اسماء الأقسام
نعمل مثلا هالكلاس
<div class="gg">
المنتدى العام
</div>
نضع التعريفات بالشكل هذا في تعاريف CSS الإضافية
.gg {
text-align: center;
font-size: 50px;
font-family: هنا نضع اسم الخط ;
}
https://www.g-tmooh.com/up/do.php?img=1075 (https://www.g-tmooh.com/up/)
_________________.
https://www.g-tmooh.com/up/do.php?img=1076 (https://www.g-tmooh.com/up/)
ممكن استخدامها في اي مكان في المنتدى
بإستخدام هذه الطريقة لا يتوجب تثبيت الخط على جهاز العضو أو الزائر
يفضل عدم استخدام خطوط كثيرة على الاستايل لان هالخطوط يتم تحميلها على جهاز الزائر
لو فرضنا استخدمت مثلا 6 خطوط وكان حجم كل خط تقريبا 70 كيلو الحجم الكلي للخطوط اكثر من 400 كيلو ممكن يسبب تأخير في تحميل الصفحة (ثقل في التصفح )
يوجد اكثر من صيغة للخطوط تستطيع تركيبها لكن هالصيغ الموجودة في الموضوع تعطي اقل حجم للخط بعض
بأذن الله بحدث الموضوع ويتم ارفاق اكثر من خط