تلعب الخطوط دورا مهما في التصميم المرئي لأي موقع ويب أو تصميم. يمكنهم خلق انطباع فريد والتأكيد على أسلوب المشروع. يعد خط بيكسارت خيارا شائعا بين المصممين الذين يرغبون في إنشاء مظهر رجعي أو مرح لمحتواهم.
في هذا الدليل ، سننظر في كيفية إضافة خط بيكسارت إلى موقع الويب الخاص بك. الخطوة الأولى هي تنزيل الخط وتهيئته على جهاز الكمبيوتر أو الخادم. ثم سوف تحتاج إلى تحويل الخط إلى التنسيق الذي تحتاجه للمتصفح ، وكتابة الأنماط في ملف كس الخاص بك واستخدام الخط في الأماكن الصحيحة على الصفحة.
أولا ، تحتاج إلى تحميل ملف الخط بيكسارت في تف (تروتايب الخط) شكل. قد تكون حقوق استخدام الخط محدودة ، لذا تأكد من امتثالك لقواعد الاستخدام وترخيص خط معين. بعد تنزيل الملف ، تحتاج إلى حفظه على جهاز الكمبيوتر الخاص بك أو الخادم حيث تخطط لاستخدامه.
يرجى ملاحظة أن تحويل الخط إلى تنسيقات مختلفة قد يكون مطلوبا لدعم المتصفحات المختلفة. وغالبا ما تستخدم صيغ تف ، يوت ، وف و وف 2.
- كيفية الاتصال واستخدام الخط بيكسارت
- تثبيت وتنزيل خط بيكسارت
- إضافة خط بيكسارت إلى ملف كس
- باستخدام خط بيكسارت في كود هتمل
- تصميم النص باستخدام خط بيكسارت
- استخدام خط بيكسارت على صفحة ويب
كيفية الاتصال واستخدام الخط بيكسارت
- تحميل ملفات الخط بيكسارت من المواقع المتخصصة.
- ضع ملفات الخطوط على الخادم وأضفها إلى الدليل مع ملفات الخطوط الأخرى على موقع الويب الخاص بك.
- افتح ملف كس لموقع الويب الخاص بك باستخدام محرر نصوص.
- إضافة التعليمات البرمجية التالية إلى ملف كس الخاص بك:
@الخط الوجه {
الخط الأسرة: 'بيكسارت';
سرك: ورل('مسار/إلى/الخط/ملف/بيكسارت.تف') شكل ('تروتايب');}
الجسم {
الخط الأسرة: 'بيكسارت' ، بلا الرقيق;
}
في التعليمات البرمجية أعلاه ، 'مسار / إلى / ملف الخط' هو المسار النسبي لملفات الخط على الخادم الخاص بك. تأكد من تحديد المسار بشكل صحيح.
بعد توصيل الخط بيكسارت بنجاح إلى موقع الويب الخاص بك ، يمكنك استخدامه لعناصر مختلفة من صفحة ويب. على سبيل المثال ، لتطبيق خط بيكسارت على رأس ح1 ، إضافة التعليمات البرمجية التالية إلى ملف كس الخاص بك:
ح1 {
الخط الأسرة: 'بيكسارت' ، بلا الرقيق;
نأمل أن تكون هذه المقالة قد ساعدتك في تعلم كيفية الاتصال واستخدام خط بيكسارت على موقع الويب الخاص بك. هل لديك وظيفة لطيفة!
تثبيت وتنزيل خط بيكسارت
لبدء تثبيت خط بيكسارت على موقع الويب ، ستحتاج إلى ملفات الخطوط. عادة ما يكون لملفات الخطوط امتداد.صندوق النقد الدولي, .أوتف أو .ووف.
1. تحميل ملفات الخط بيكسارت من موقع موثوق بها أو من الشركة المصنعة الرسمية.
وفيما يلي مثال على كيفية إضافة خط بيكسارت إلى ملف كس الخاص بك:
@الخط الوجه {
الخط الأسرة: 'بيكسارت';
سرك: ورل('/الخطوط/بيكسارت.تف') شكل ('تروتايب');
}
في هذا المثال ، نحدد مسار العمل إلى ملف خط بيكسارت وتنسيقه. تأكد من تحديد المسار بشكل صحيح ويتوافق مع موقع ملفات الخطوط على الخادم الخاص بك.
5. بعد إضافة قاعدة @ الخط الوجه إلى ملف كس الخاص بك ، يمكنك استخدام هذا الخط في الأنماط الخاصة بك باستخدام خاصية الخط الأسرة.
مثال على استخدام خط بيكسارت في كس الخاص بك:
الجسم {الخط الأسرة: 'بيكسارت' ، بلا الرقيق;
}
6. احفظ التغييرات في ملف كس الخاص بك. بعد ذلك ، ستقوم المتصفحات بتنزيل وتطبيق خط بيكسارت على النص الموجود على موقعك.
الآن تم تثبيت خط بيكسارت بنجاح وهو متاح للاستخدام على موقع الويب الخاص بك.
إضافة خط بيكسارت إلى ملف كس
- 1. تحميل ملف الخط بيكسارت مع التمديد المناسب (.صندوق النقد الدولي, .أوتف, .ووف).
- 2. احفظ ملف الخط في مجلد مشروعك ، على سبيل المثال ، في المجلد الفرعي" الخطوط".
- 3. افتح ملف كس للمشروع الذي تريد إضافة الخط إليه.
- 4. استخدام قاعدة @ الخط وجه لتحميل الخط وإعطائها اسما لاستخدامها في ملف كس.
مثال:
سرك: ورل("الخطوط/بيكسلارت.تف") شكل ("تروتايب");}
5. قم بتعيين خاصية عائلة الخط مع اسم الخط المحدد في @وجه الخط إلى العنصر أو العناصر التي تريد استخدام الخط لها.
مثال:
الجسم {
الخط الأسرة: "بيكسلارت" ، بلا الرقيق;
لاستخدام خط بيكسارت في كود هتمل ، تحتاج إلى اتباع بعض الخطوات البسيطة:
تحميل وتثبيت الخط بيكسارت على جهاز الكمبيوتر الخاص بك.
في ملف كس ، استخدم قاعدة @ الخط وجه لتحديد المسار إلى ملف الخط بيكسارت:
@الخط الوجه {
مثال على النص باستخدام خط بيكسارت
- الآن أنت تعرف كيفية استخدام الخط بيكسارت في التعليمات البرمجية هتمل ، وسوف تكون قادرة على إضافة نظرة فريدة وأنيقة لصفحات الويب الخاصة بك.
- الخطوة 1: توصيل الخط
- لمستند هتمل الخاص بك:
- من كل شكل.
- الخطوة 2: تطبيق الخط على النص
الآن بعد أن تم توصيل خط بيكسارت ، يمكنك تطبيقه على عناصر النص في شفرة هتمل الخاصة بك. للقيام بذلك ، يجب عليك تعيين الخاصية
الخط الأسرة
بالنسبة للعناصر الضرورية ذات القيمة المساوية لاسم الخط:
مثال على النص مع خط بيكسارت
- يمكنك أيضا استخدام هذا الخط كرمز لعناصر القائمة عن طريق تحديد فئة لذلك وتطبيقه في كس.:
- البند 1
| قائمة البند 2 | |
|---|---|
| بند القائمة 3 | |
| الآن سيتم عرض عناصر القائمة باستخدام خط بيكسارت. | |
| الخطوة 3: التصميم الإضافي | لإنشاء تأثير أكثر جاذبية ، يمكنك استخدام خصائص كس الأخرى لنمط النص ، على سبيل المثال: |
لون الخط:
اللون
| ; | حجم الخط: |
|---|---|
| حجم الخط | ; |
| ظل النص: | نص الظل |
| ; | محاذاة النص: |
محاذاة النص