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