ط*طµط±ظٹط§ظ‹ ط´ط±ط* ظƒظˆط¯ ط§ظ„ط®ط· @font-face ظ„طھط±ظƒظٹط¨ ط£ط¬ظ…ظ„ ط§ظ„ط®ط·ظˆط· ط¥ظ„ظ‰ طµظپط*ط§طھ ط§ظ„ظˆظٹط¨ ..


الـسلام عليكم ورحمة الله وبركاته ..

بسم الله الرحمن الرحيم ..

شرح طريقة كود code الخط @font-face لتركيب install أجمل الخطوط إلى صفحات الويب ..

هذه كود code بتقنية CSS3 ..




مثال مباشرة :

@font-face CSS3 - Progs4u.Net

ملاحظة هامة : يجب أن يكون لديك ترخيص الخطوط ويب الخط ! تحقق من موقع ويب الذي يتم تحميل أو شراء الخط من ..
أو الوثائق التي تأتي مع الخط ، حتى لا تغلق موقعك ، إذا أن الخط مجاناً يمكنك استخدام فى موقعك ..
======================================
هذه كود code الخط :

رمز Code:
@font-face { font-family: ahmed; src: url('ahmed.eot'); src: local('☺'), url('font/Hayah.otf') format("truetype"}
======================================

شرح طريقة تركيب install كود code الخط ، شرح طريقة سهلة ، أولاً نضيف كود code مثال ..

رمز Code:
<h1>مرحبا بك</h1>
أو يمكنك ديف (div) أو اى كود code حسب موقعك وبعد كده نضيف كلاس Class ، وبعد كتابة كود code الأن نضيف كود code CSS ..

اضف كود code css ونضيف كود code نوع الخط واكتب اى اسم مثلا انا سميت ahmed طبعا بدون مسافة ولا حروف كبيرة فقط كلمة عادية تمام ..

الأن نضيف كود code نوع الخط اساسي *مهمة مثل tahoma او arial لأن كود code الخط ليس متوافق جميع المتصفحات يعنى أهم الخط لديك والخط اساسي يعنى احتياطي ..

رمز Code:
h1{font-family: ahmed, tahoma;}

وبعد كتابة نوع الخط ، الأن نضيف الخط طبيعي *مهمة ..

رمز Code:
h1{font-family: ahmed, tahoma;font-style:normal;font-weight:normal;}

وبعد كتابة الخط طبيعي ، الأن نضيف حجم الخط ، طبعاً اهم كحد أقصي 14pt علشان تبقى الخط واضح ..

رمز Code:
h1{font-family: ahmed, tahoma;font-style:normal;font-weight:normal;font-size:14pt}

وبعد ذلك نضيف كود code الخط ونضيف اسم الخط الذي ضفت فى h1 ، ونضيف مسار ملف خط ..

رمز Code:
@font-face { font-family: ahmed; src: url('ahmed.eot'); src: local('☺'), url('font/Hayah.otf') format(&quot;truetype&quot;}
هكذا شرح طريقة انتهيت ، إذا لو لديك الخط منفصلة او انعكاس فى موقعك يبقى المشكلة فى ملف خط وليس كود code
يعنى جرب ملفات خطوط تانية ..
======================================
أنواع الملفات لـ دعم متصفحات :

Internet Explorer (all versions): EOT
Safari (3.2+) : TTF / OTF
Chrome (all versions) : SVG ( TTF / OTF added 25th Jan 2014)
Firefox (3.5+) : TTF / OTF (.WOFF added 3.6)
Opera (10+) : TTF / OTF
iPhone (3.1) : SVG

لذا : TTF / OTF = أفضل دعم متصفحات ممكن ..

======================================


تم بحمد لله ، بالتوفيق لكم ..






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








©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©