CSS 3 Custom Fonts | تخصيص خطوط بالصفحة CSS 3

تم تحميل الصفحة في 0,3881780 ثانية
CSS 3 Custom Fonts | تخصيص خطوط بالصفحة CSS 3
إنضم
31 أغسطس 2011
المشاركات
7,093
الإعجابات
2,669
النقاط
113
العمر
9
الإقامة
Jordan

أخباركم يآ حلوين ؟ :30:
انشالله كويسين ؟ :12:





اليوم جايبلكم شرح حركة حلوة بال CSS الي هي :
تخصيص انواع خطوط ( Custom Fonts )

في البداية نحط هذا الكود بملف ال CSS او بين الوسمين <style></style> حسب انت وشغلك

كود:
@font-face{
    [COLOR=Teal]font-family [/COLOR]: [COLOR=Green]Hamzawy[/COLOR];
    [COLOR=Teal]src [/COLOR]: [COLOR=Green]url[/COLOR]([COLOR=Blue]'sob.eot'[/COLOR]); [COLOR=SeaGreen]/* Internet Explorer */[/COLOR]
}

@font-face{
    [COLOR=Teal]font-family [/COLOR]: [COLOR=Green]Hamzawy[/COLOR];
    [COLOR=Teal]src [/COLOR]: [COLOR=Green]url[/COLOR]([COLOR=Blue]'er.ttf'[/COLOR]); [COLOR=SeaGreen]/* Other Browsers */[/COLOR]
}






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





وهذا موقع لتحويل الخطوط للصيغة الي يقبلها الاكسبلولر

http://www.kirsle.net/wizards/ttf2eot.cgi








نيجي للشرح السريع

كود:
@font-face


نقدر نوصفه انو الأمر الي نحجز فيه الخط


كود:
    [COLOR=Teal]font-family [/COLOR]: [COLOR=Green]Hamzawy[/COLOR];
    [COLOR=Teal]src [/COLOR]: [COLOR=Green]url[/COLOR]([COLOR=Blue]'er.ttf'[/COLOR]); [COLOR=SeaGreen]/* Other Browsers */[/COLOR]


الأول اسم الخط الي رح نستخدمه فيما بعد ، والثاني رآبط الخط

**

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

http://www.my-site.com/my-page.html

لما تحط الرابط بهذا الشكل
كود:
'font.ttf'

رآح يكون مكان الخط

http://www.my-site.com/font.ttf


انشالله تكون وضحت هالنقطة

الآن نيجي للتطبيق

سهل كأنك تختار اي خط

بامكانك من خصائص الكائن

كود:
[COLOR=Blue]<font [COLOR=Red]face[/COLOR][/COLOR]=[COLOR=Purple]"Hamzawy"[/COLOR][COLOR=Blue]></font>[/COLOR]

او بكود css
كود:
.myclass
{
   [COLOR=Teal]font-family[/COLOR]: [COLOR=Green]Hamzawy[/COLOR];
}

وطبعا الطريقة متوافقة مع كل المتصفحات

FireFox | Google Chrome | Opera | Internet Explorer

وصلنا لنهاية الموضوع
اتمنا يكون سهل وما فيه اي تعقيد

محدثكم من ورا المايك حمزاوي :15:

 
إنضم
7 أبريل 2013
المشاركات
1,131
الإعجابات
874
النقاط
0
الإقامة
J̷o̷r̷D̷a̷n̷
رد: CSS 3 Custom Fonts | تخصيص خطوط بالصفحة CSS 3

بَآرّكّ آلّلّهّ فَيّكّ َشرّحَ جََّمّيّلّ يّعّطّيّكّ آلّعّآفَيّة​
 

9shaguan

Beginner Developer
rank
إنضم
6 نوفمبر 2012
المشاركات
29
الإعجابات
17
النقاط
0
رد: CSS 3 Custom Fonts | تخصيص خطوط بالصفحة CSS 3

الله يعطيك العافية
 

UPload

Beginner Developer
rank
إنضم
24 ديسمبر 2013
المشاركات
87
الإعجابات
115
النقاط
33
الإقامة
IraQ
رد: CSS 3 Custom Fonts | تخصيص خطوط بالصفحة CSS 3

سلمت يداك اخي المبدع
تقديري لعطاءك
 

KasperCode

Active DeveloPer
rankrankrank
إنضم
13 سبتمبر 2013
المشاركات
848
الإعجابات
931
النقاط
93
الإقامة
.:EGY:.
رد: CSS 3 Custom Fonts | تخصيص خطوط بالصفحة CSS 3

تسلم ايدك يا بطل
 

modest_man

Beginner Developer
rank
إنضم
23 مارس 2015
المشاركات
5
الإعجابات
1
النقاط
0
الإقامة
"Yem"
رد: CSS 3 Custom Fonts | تخصيص خطوط بالصفحة CSS 3

:smile: الله يسعدك ماقــصرت :smile:

 

الأعضاء النشطين حاليآ الذين يشاهدون هذا الموضوع (1 عضو و 0 ضيف)

خيارات الاستايل

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

إرجاع خيارات الإستايل