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