أريد إستخدام خطوط عربية مثل هذا الموقع في تصميم موقعي ؟ @face-font

بدأه microsmart.com في 20 يناير 2013 · 16 رد · 6,460 مشاهدة · في تصميم الصفحات باستخدام ال "CSS"

#120 يناير 2013 في 19:19 صاحب الموضوع

السلام عليكم و رحمة الله و بركاته
و بعد سعيد جداً بعودة المنتدى من جديد
فلقد افادني في عملي كثيراً
و مشكلتي هي التالية :
أريد إستخدام خطوط عربية جميله مثل الخطوط المستخدمه في هذا الموقع
و جربت خاصية @face-font
و جربتها و عملت على السيرفر المحلي
و لكن بعد رفع الموقع على السيرفر على شبكة الانترنت
لا تعمل الخطوط
حتى بعد إجراء عملية صلاحية القراءة و الكتابة و التنفيذ للخطوط المرفقه.

أرجو منكم مشكورين التكرم بمثال الخط المستخدم في المنتدى
و لكم جزيل الشكر و العرفان

Example :

@font-face
{
	font-family:"GESSTwoBold";
	src:url("://www.rassamfarea.com/GE_SS_Two_Bold.otf?") format("eot"),
	url("http://www.rassamfarea.com/GE_SS_Two_Bold.woff") format("woff"),
	url("http://www.rassamfarea.com/GE_SS_Two_Bold.ttf") format("truetype"),
	url("http://www.rassamfarea.com/GE_SS_Two_Bold.svg#GESSTwoBold-Bold") format("svg");
	font-weight:normal;
	font-style:normal;
}

تم تعديل هذه المشاركة بواسطة Xacker في 22 يناير 2013 في 09:51

#220 يناير 2013 في 19:23

بعد إضافة @font-face عليك طبعاً تطبيق الخط على العنصر الذي تريده

مثلاً:

p {font-family: GESSTwoBold, Tahoma, Arial}

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#320 يناير 2013 في 20:15

أشكرك على الرد

و لكني كما قلت من قبل

تعمل على السيرفر المحلي

و لا تعمل بعد رفع الموقع على الانترنت

فأين تكمن المشكلة ؟

#420 يناير 2013 في 20:33

لا أعلم كيف من المفترض أن يظهر الخط

لذا جرب التالي:

 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style> 
@font-face
{
font-family:"GESSTwoBold";
src: url("http://www.rassamfarea.com/GE_SS_Two_Bold.otf?") format("eot"),
url("http://www.rassamfarea.com/GE_SS_Two_Bold.woff") format("woff"),
url("http://www.rassamfarea.com/GE_SS_Two_Bold.ttf") format("truetype"),
url("http://www.rassamfarea.com/GE_SS_Two_Bold.svg#GESSTwoBold-Bold") format("svg");
font-weight:normal;
font-style:normal;
}
 
div
{
font-family: "GESSTwoBold";
}
</style>
</head>
<body>
 
<p><b>Note:</b> Internet Explorer 9 only supports .eot fonts.</p>
 
<div>
تجربة للخط العربي<br />
With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.
</div>
 
</body>
</html>

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#520 يناير 2013 في 20:49

أخي جربت المثال و نفس المشكلة

تعمل الأرقام أما الأحرف لا

إليك الصورة :

#620 يناير 2013 في 20:50

جرب الرابط التالي :

www.rassamfarea.com/farabic.htm

#721 يناير 2013 في 18:39

أخي العزيز :

أرجو منك مشكورا تزويدي بالكود الخاص بالمنتدى إن أمكن ....

و كذلك الخطوط ...

لكي أقوم بالتجربة عليه

أو إذا من الممكن قراءة خط عبر موقع آخر ؟

أرجو إفادتي

#822 يناير 2013 في 09:11

لا أعتقد أن المشكلة في الكود الذي تستخدمه يا أخي، النتيجة واحدة على Opera, Firefox, Chrome بالتالي فغالباً المشكلة في الخط نفسه

الكود الخاص بالمنتدى هو من الشكل:

 
@font-face {
    font-family:"Font Name";font-weight:100;src:url(font.eot?iefix) format("eot");
}
 
@font-face {
    font-family:"Font Name";font-weight:100;src:url(font.eot?iefix);src:url(font.woff) format("woff"),url(font.ttf) format("truetype"),url(font.svg#font_file_name) format("svg");
}

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#922 يناير 2013 في 09:26

هذا مثال للخط المستخدم في موقع وادي التقنية:

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.a {font-family:'DroidArabicNaskh'; font-size: 30px}
</style>
<style type="text/css">
@font-face{font-family:'DroidArabicNaskh';src:url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-regular.eot);src:url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-regular.eot?#iefix) format('embedded-opentype'),url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-regular.woff) format('woff'),url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-regular.ttf) format('truetype');font-weight:normal;font-style:normal;}@font-face{font-family:'DroidArabicNaskh';src:url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-bold.eot);src:url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-bold.eot?#iefix) format('embedded-opentype'),url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-bold.woff) format('woff'),url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-bold.ttf) format('truetype');font-weight:bold;font-style:normal;}
</style>
</head>
<body>
 
<div class="a">
تجربة للخط العربي
</div>
 
</body>
</html>

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#1022 يناير 2013 في 09:32

شكراً أخي على الرد

و سأقوم بالتجربة الآن

مع العلم بأني قمت بتحويل الخط عبر موقع

www.fontsquirrel.com/fontface/generator‏

جاري التجربة

#1122 يناير 2013 في 09:43

أخي العزيز :

جربت المثال و لم يعمل مثل موقع التقنية

www.rassamfarea.com/farabic.htm

سؤالي هو :

هل من الممكن إستخدام خط من موقع آخر كما هو الرابط في المثال المرسل

أم يجب تحميل الخطوط الى السيرفر و تعديل مسار موقع الخط على السيرفر ؟

مع خالص الامتننان

#1222 يناير 2013 في 09:50

طبعاً يمكن استخدامها من موقع آخر.

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#1325 يناير 2013 في 11:53

أخي العزيز جربت كل الاحتمالات حتى الخط الموجود على المنتدى

إليك المثال :

<!DOCTYPE html><html><head><meta charset="utf-8" /><style type="text/css">.a {font-family:'DroidArabicNaskh'; font-size: 30px}.bz {font-family:'HelveticaNeueLTW20'; font-size: 30px}@font-face{font-family:'DroidArabicNaskh';src:url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-regular.eot);src:url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-regular.eot?#iefix) format('embedded-opentype'),url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-regular.woff) format('woff'),url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-regular.ttf) format('truetype');font-weight:normal;font-style:normal;}@font-face{font-family:'DroidArabicNaskh';src:url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-bold.eot);src:url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-bold.eot?#iefix) format('embedded-opentype'),url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-bold.woff) format('woff'),url(http://itwadi.com/sites/all/themes/magazeen/css/droidnaskh-bold.ttf) format('truetype');font-weight:bold;font-style:normal;}@font-face{font-family:"HelveticaNeueLTW20";font-weight:100;           src:url(/public/style_fonts/ab7f002d-5f09-4a65-b7ad-9f01ec5bfaf0.eot?iefix) format("eot")}@font-face{font-family:"HelveticaNeueLTW20";font-weight:100;           src:url(/public/style_fonts/ab7f002d-5f09-4a65-b7ad-9f01ec5bfaf0.eot?iefix);           src:url(/public/style_fonts/b8ee7e47-48e4-4b5b-8a74-cf02708fb54a.woff) format("woff"),              url(/public/style_fonts/074fa346-a8c5-4331-9d93-7a06123af067.ttf) format("truetype"),              url(/public/style_fonts/e953f49c-15a9-4394-97dd-a3f230e12e0b.svg#e953f49c-15a9-4394-97dd-a3f230e12e0b) format("svg")}@font-face{font-family:"HelveticaNeueLTW20";font-weight:normal;           src:url(/public/style_fonts/13e78e12-2750-44d8-bc69-b572c5b3168a.eot?iefix) format("eot")}@font-face{font-family:"HelveticaNeueLTW20";font-weight:normal;           src:url(/public/style_fonts/13e78e12-2750-44d8-bc69-b572c5b3168a.eot?iefix);           src:url(/public/style_fonts/00c272cd-cca1-4737-be37-73168f7c7f27.woff) format("woff"),           url(/public/style_fonts/9669fcdb-a6a6-4b2b-8214-0ae85ba732c7.ttf) format("truetype"),           url(/public/style_fonts/88820c1d-bb1c-4797-ae48-3d3a36fb5c10.svg#88820c1d-bb1c-4797-ae48-3d3a36fb5c10) format("svg")}@font-face{font-family:"HelveticaNeueLTW20";font-weight:bold;src:url(/public/style_fonts/045ca244-a42a-4d4f-bc08-b0f4f54df3cc.eot?iefix) format("eot")}@font-face{font-family:"HelveticaNeueLTW20";font-weight:bold;src:url(/public/style_fonts/045ca244-a42a-4d4f-bc08-b0f4f54df3cc.eot?iefix);src:url(/public/style_fonts/929f7332-2da4-4512-8f53-a056ed366167.woff) format("woff"),url(/public/style_fonts/a9fc3a1c-4466-47f7-b408-5bcf52129409.ttf) format("truetype"),                                                                                                                                                                                                                                                                                                                                                            url(/public/style_fonts/27d196fc-66d6-4630-a928-d8127601c243.svg#27d196fc-66d6-4630-a928-d8127601c243) format("svg")}</style></head><body> <div class="bz">تجربة للخط العربي</div><div class="a">تجربة للخط العربي</div> </body></html>

#1426 يناير 2013 في 14:03

الافضل ان ترفع الخطوط على سيرفرك ونستثني خطوط قوقول ..

بعدها نريد ترفع لنا تطبيقك لنراجع كتابة الكود ( ملف css وملف html )

تم تعديل هذه المشاركة بواسطة Ahmad Mutiry في 26 يناير 2013 في 14:04

#1529 يناير 2013 في 09:09

أخوتي الأعزاء :

عملت نقل الخطوط على السيرفر و عملت بنجاح

www.rassamfarea.com/farabic.htm

مشكورين

#1630 يناير 2013 في 06:54

موفق اخي الكريم

#1723 أبريل 2013 في 09:42

السلام عليكم ورحمة الله إخواني,

الآن يمكنكم الإختيار من أكثر من 50 خط عربي مخصص للإستخدام في صفحات الإنترنت من مكتبة خطوط الويب العربية:

@font-face عربي

مواضيع مشابهة

خطوط عربية مجانية للإستخدام في تصميم الويب1 رد · 17 مايو 2014
رفع خطوط للتصميم بلوجر0 رد · 28 مايو 2014
خطوط عربية من مايكروسوفت1 رد · 23 مارس 2001
هل يمكن استخدام خطوط للموقع دون الاعتماد على الخطوط الموجودة على جهاز من يتصفح الموقع2 رد · 20 أكتوبر 2008
اريد تصميم بانر باللغة العربية مثل المثال الموجود0 رد · 30 يونيو 2007
برمجة خطوط عربية0 رد · 22 أبريل 2004

أريد إستخدام خطوط عربية مثل هذا الموقع في تصميم موقعي ؟ @face-font

مواضيع مشابهة

عدد الزوار حالياً