قد تحتوي العناوين والنصوص المعروضة على صفحات الويب المختلفة على أنماط وخطوط مختلفة. ومع ذلك ، على الرغم من هذا التنوع ، يفضل العديد من المستخدمين خطا مألوفا ومعروفا يتم استخدامه على موارد الإنترنت الشائعة مثل هبر. إذا كنت تحب الخط أيضا على هذا الموقع وتريد معرفة كيفية إضافته إلى صفحة الويب الخاصة بك ، فستساعدك هذه المقالة في معرفة ذلك.
الخط المستخدم في هبر خاص ويسمى"هلفتيكا". يتميز بتصميم متوازن وقابل للقراءة ، مما يجعل النصوص الموجودة على الموقع سهلة القراءة. يلعب خط صفحة الويب دورا مهما في تشكيل انطباعها العام ويمكن أن يؤثر على كيفية تفاعل المستخدمين مع المحتوى.
الآن دعونا ننظر في كيفية إضافة" هلفتيكا " الخط إلى صفحة الويب الخاصة بك. الخطوة الأولى هي توصيل الخط باستخدام كس. للقيام بذلك ، ستحتاج إلى إنشاء ملف نمط أو إجراء تغييرات على ملف موجود. استخدم الكود التالي:
@استيراد رابط ('https://fonts.googleapis.com/css2?family=Helvetica:wght@400; 700 & عرض = مبادلة');
الجسم {' {'}
الخط الأسرة: 'هلفتيكا' ، بلا الرقيق;
{‘}’}
في التعليمات البرمجية أعلاه ، ونحن نستخدم وظيفة " @ استيراد "لتوصيل الخط" هلفتيكا " من خادم الويب جوجل الخطوط. ثم نحدد أنه سيتم تطبيق هذا الخط على كل النص على صفحة الويب باستخدام خاصية "عائلة الخط".
الآن بعد أن تمت إضافة الخط" هلفتيكا " إلى صفحة الويب الخاصة بك ، يمكنك البدء في نمط النصوص ، مما يجعلها أكثر مماثلة للنصوص على هبر. استخدم علامات هتمل (على سبيل المثال ، و) و كس لتعيين حجم الخط والأنماط الأخرى.
- تصميم النص على الموقع
- استخدام الخطوط
- أسلوب النص
- خلق تأثيرات
تصميم النص على الموقع
فيما يلي بعض التوصيات لتصميم النص على الموقع:
- استخدم خطوطا قابلة للقراءة: اختيار الخطوط التي هي سهلة القراءة على الشاشة ، مثل أريال ، فيردانا أو هلفتيكا. تأكد من التحقق من كيفية ظهور النص على الأجهزة والمتصفحات المختلفة.
- اختر حجم الخط الصحيح: يجب أن يكون حجم الخط كبيرا بما يكفي لكي يكون النص قابلا للقراءة ، ولكن ليس كبيرا جدا حتى لا تفرط في تحميل الصفحة.
- للفقرات.
- لتسليط الضوء على أجزاء النص الهامة. سيساعد هذا المستخدم على التنقل بشكل أسرع والتركيز على المعلومات التي يحتاجها.
- لإنشاء قوائم. تسهل القوائم إدراك المعلومات وتسمح لك بالتنقل بسرعة.
- استخدم التصميم سريع الاستجابة: ضع في اعتبارك أن المستخدمين يشاهدون مواقع الويب على أجهزة وشاشات مختلفة. لذلك ، من المهم أن يتم عرض النص وتصميمه بشكل صحيح على الأجهزة المحمولة والأجهزة اللوحية وأجهزة الكمبيوتر المكتبية.
سيساعد اتباع هذه التوصيات في جعل النص على موقعك قابلا للقراءة وغنيا بالمعلومات وجذابا للمستخدمين.
استخدام الخطوط
.
. على سبيل المثال,
.
وغيرها. ومع ذلك ، لا يوصى باستخدام هذه الخطوط ، لأنها قد تؤثر على إمكانية الوصول والتوافق عبر المتصفحات.
من المهم أن تتذكر أنه عند استخدام الخطوط على صفحة الويب ، يجب أن تأخذ في الاعتبار إمكانية الوصول إليها وقابليتها للقراءة ، وكذلك التحقق من عرضها على مختلف الأجهزة ومتصفحات الويب.
أسلوب النص
لتغيير الخط ، يمكنك استخدام خصائص "عائلة الخط" و "حجم الخط" و "وزن الخط" وغيرها. باستخدام خاصية" عائلة الخط " ، يمكنك تحديد الخط نفسه ، والذي سيتم استخدامه لعرض النص. على سبيل المثال ، يمكنك استخدام الخطوط أريال ، هلفتيكا ، تايمز نيو رومان ، الخ.
يتم استخدام خاصية" حجم الخط " لتعيين حجم الخط. يتم تعيين القيمة بالبكسل أو النسب المئوية. على سبيل المثال ، يمكن تعيين حجم الخط كـ "16 بكسل" أو "100٪".
تحدد خاصية" وزن الخط " سمك الخط. يمكن أن تكون القيمة " عادية "(سمك قياسي) أو" غامق " (غامق) أو رقم من 100 إلى 900 (كلما زاد الرقم ، كان الخط أكثر جرأة).
بالإضافة إلى تغيير الخط ، يمكن أيضا محاذاة النص أفقيا وعموديا باستخدام خصائص" محاذاة النص "و" المحاذاة الرأسية".
لإضافة أنماط إضافية إلى النص ، يمكنك استخدام الخصائص "اللون" (لون النص) ، "زخرفة النص" (تسطير ، يتوسطه خط ، تسطير علوي سفلي) وغيرها.
يتيح لك الجمع بين الخصائص والقيم المختلفة إنشاء مجموعة متنوعة من أنماط النص على صفحات الويب ، مما يساعد على ضمان جاذبيتها الجمالية وقابليتها للقراءة.
خلق تأثيرات
لإنشاء التأثيرات المستخدمة على موقع هبر ، تحتاج إلى إتقان بعض تقنيات التخطيط واستخدام كس. وفيما يلي بعض الآثار الأساسية التي غالبا ما توجد على هبر والتي يمكنك استخدامها على موقع الويب الخاص بك.
الظلال
وفقا لذلك. يتم تحديد قيم الإزاحة الأفقية والرأسية والتشويش ولون الظل.
التدرجات
مع قيمة التدرج ، على سبيل المثال ، خطي أو شعاعي.
الرسوم المتحركة
، والذي يحدد المدة والنوع وعدد التكرارات ومعلمات الرسوم المتحركة الأخرى.
التحولات
يمكنك تغيير حجم العنصر أو تدويره أو نقله وفقا لذلك.
التحولات
، والتي تحدد معلمات الانتقال مثل المدة والنوع والتأخير وغيرها.
هذه ليست سوى بعض الآثار المحتملة التي يمكن إنشاؤها باستخدام كس. بعد إتقان هذه التقنيات وغيرها من تقنيات التخطيط ، يمكنك جعل موقعك أكثر جاذبية وتفاعلية ، كما في مثال هبر.