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