إضافة خط يحمل على المتصفح (من الموقع) للعرض

المشرفون: alhitary، طاقم الدعم، طاقم الاستايلات، طاقم الإضافات، طاقم الدروس، طاقم التعريب

صورة العضو الشخصية
اليافعي
عضو شرف
عضو شرف
مشاركات: 584
اشترك في: الأربعاء يناير 21, 2004 6:28 am

إضافة خط يحمل على المتصفح (من الموقع) للعرض

مشاركةبواسطة اليافعي » الأحد فبراير 02, 2014 6:20 am

في هذا الدرس البسيط سوف نتعلم كيفية رفع خط معين الى المنتدى ومن ثم استعمال الخط ليكون الخط الذي يعرض للمتصفح

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

مثال على الخطوط
صورة

صورة


معاينة http://www.arabicgt.com

الطريقة :::::::

1- حمل الخطوط المرفقة وارفع مجلد الخطوط الى مجلد المنتدى
:
2- افتح ملف الـ
links.css
في مجلد
template\style\Theme
واضف في بداية الملف

كود: تحديد الكل

@font-face {
font-family: 'arab_droid_bold';
src:url('font/DroidKufi-Bold.ttf') format('truetype');
src: url('font/DroidKufi-Bold.eot') format('embedded-opentype'),
url('font/DroidKufi-Bold.woff') format('woff'),
url('font/DroidKufi-Bold.otf')format('opentype'),
url('font/DroidKufi-Bold.svg') format('svg');
}

@font-face {
font-family: 'arab_droid';
src:url('font/DroidKufi-Regular.ttf') format('truetype');
src: url('font/DroidKufi-Bold.eot') format('embedded-opentype'),
url('font/DroidKufi-Regular.woff') format('woff'),
url('font/DroidKufi-Regular.otf')format('opentype'),
url('font/DroidKufi-Regular.svg') format('svg');
}


3- ألان سوف نقوم بإضافة الخطوط إلى أي نص في المنتدى

لكي تضيف الخط الداكن

كود: تحديد الكل

font-family: 'arab_droid_bold',Tahoma;

لكي تضيف الخط العادي

كود: تحديد الكل

font-family: 'arab_droid', Tahoma;


عنوان المنتديات وعنوان الموضوع تجده في

كود: تحديد الكل

links.css
a.topictitle
a.forumtitle


نص الموضوع وعنوان الموضوع الذي في نص الموضوع تجده في

كود: تحديد الكل

content.css
.content
.postbody h3


باقي الخطوط والعناوين تجدها في

كود: تحديد الكل

common.css
body
h1
h2
h3


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

http://projects.arabeyes.org/project.php?proj=Khotot

اكبس هنا لتحميل مجلد جاهز يحتوي على الـ css والـ html والخطوط واستكشف الطريقة بنفسك
https://www.dropbox.com/s/hvsf91qfmdksp ... s.zip?dl=0
ليس لديك الصلاحية لمشاهدة المرفقات
آخر تعديل بواسطة اليافعي في الاثنين فبراير 17, 2014 4:56 pm، تم التعديل مرة واحدة.
phpbbarabia.com




صورة العضو الشخصية
ياسر عتريس
عضو فعال
عضو فعال
مشاركات: 507
اشترك في: الجمعة سبتمبر 16, 2005 10:27 am
مكان: حدوتة

Re: إضافة خط يحمل على المتصفح (من الموقع) للعرض

مشاركةبواسطة ياسر عتريس » السبت إبريل 01, 2017 10:41 pm

اليافعي كتب:font-family: '
:::::::::: إذا أردت المزيد من الخطوط العربية تأكد أنها من الخطوط المفتوحة يمكن زيارة موقع عيون العرب للخطوط العربية ذات المصادر المفتوحة على هذا الرابط ::::::::::::

http://projects.arabeyes.org/project.php?proj=Khotot

اكبس هنا لتحميل مجلد جاهز يحتوي على الـ css والـ html والخطوط واستكشف الطريقة بنفسك
https://www.dropbox.com/s/hvsf91qfmdksp ... s.zip?dl=0


الشرح رائع شكرا على مجهودك ولكن للاسف مش عارف احمل اى حاجة لان الراوبط انتهت
موقع حدوتة
http://www.hadota.com
----------------------------------------
موقع حدوتة نت
http://www.hadota.net

alhitary
مشرف
مشرف
مشاركات: 2041
اشترك في: الأربعاء مايو 03, 2006 11:04 am
مكان: R. O. Y.

Re: إضافة خط يحمل على المتصفح (من الموقع) للعرض

مشاركةبواسطة alhitary » الأحد إبريل 02, 2017 4:49 pm

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

صورة العضو الشخصية
ياسر عتريس
عضو فعال
عضو فعال
مشاركات: 507
اشترك في: الجمعة سبتمبر 16, 2005 10:27 am
مكان: حدوتة

Re: إضافة خط يحمل على المتصفح (من الموقع) للعرض

مشاركةبواسطة ياسر عتريس » الأحد إبريل 02, 2017 7:30 pm

alhitary كتب:تفضل ملف الرابط الثاني
وجدته عندي


شكرا ليك يامبدع
موقع حدوتة
http://www.hadota.com
----------------------------------------
موقع حدوتة نت
http://www.hadota.net


العودة إلى “الاستايلات”

الموجودون الآن

المستخدمون الذين يتصفحون المنتدى الآن: CommonCrawl Bot و 0 زائر


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