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