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