يعد تغيير خط النص إحدى الطرق الرئيسية لتخصيص المحتوى بصريا على موقع الويب. يمكن أن تصبح الخطوط القياسية مملة في بعض الأحيان ولا تثير اهتمام الزوار. ومع ذلك ، بمساعدة الأزرار وبعض الإرشادات البسيطة ، يمكنك بسهولة تغيير خط النص الخاص بك لجعله أكثر جاذبية وإثارة للاهتمام بصريا.
الخطوة الأولى لتغيير الخط هي اختيار الخط المناسب الذي سيساعد في نقل رسالتك وخلق الحالة المزاجية الصحيحة. من المهم أن نفهم أن كل خط له هيكله الفريد وتأثيره العاطفي على القارئ. تشير بعض الخطوط إلى الجدية والشكليات ، بينما يمكن أن يكون البعض الآخر مرحا وغير عادي.
بعد تحديد الخط المناسب ، يمكنك استخدام كود هتمل أو فئات كس لتطبيقه على النص الخاص بك. طريقة سهلة للقيام بذلك هي استخدام الأزرار المضمنة في تصميم موقع الويب الخاص بك. على جانب الخادم ، يمكنك استخدام جافا سكريبت أو برنامج نصي آخر لتنفيذ وظائف الأزرار.
- اختيار الخط المناسب
- تغيير حجم الخط
- تحديد حجم الخط
- تغيير لون الخط
- تعيين نمط خط مختلف
- تطبيق التأثيرات على الخط
اختيار الخط المناسب
عند اختيار خط ، يجب أن تفكر في نمط وطبيعة المحتوى الخاص بك. على سبيل المثال ، إذا كنت تقوم بتطوير موقع ويب لنشاط تجاري ، فمن الأفضل استخدام خطوط جادة ومهنية. ولكن إذا كان هدفك هو جذب انتباه جمهور الشباب ، فيمكنك استخدام خطوط أكثر غرابة وإبداعا.
أيضا ، عند اختيار الخط ، يجب أن تؤخذ سهولة قراءته في الاعتبار. يجب أن يكون الخط قابلا للقراءة بوضوح حتى بحجم صغير وفي ظروف الإضاءة المختلفة. عند العمل مع النص ، يجدر استخدام الخطوط مع مجموعة كبيرة من الأحرف لتجنب المفاجآت غير السارة المرتبطة بالأحرف غير المدعومة.
يمكن اتخاذ القرار النهائي بشأن اختيار الخط عن طريق اختباره على نظام أساسي وجهاز معينين سيتم عرض موقع الويب عليه. سيساعد هذا في التأكد من أن الخط المحدد سيبدو جيدا على كل من أجهزة الكمبيوتر والأجهزة المحمولة.
بالإضافة إلى ذلك ، من الممكن استخدام الخطوط من المكتبات مثل خطوط جوجل. تقدم هذه المكتبات مجموعة واسعة من الخطوط الجميلة والمهنية التي يمكن تضمينها على موقع الويب الخاص بك مع بضعة أسطر من التعليمات البرمجية.
من المهم أن تتذكر أن اختيار الخط هو جزء من التصميم ، ويجب دمجه بشكل متناغم في النمط العام لموقع الويب. أيضا ، لا ننسى مزيج من الخطوط المختلفة-رأس والفقرة لخلق تصميم مثيرة للاهتمام وفريدة من نوعها.
تغيير حجم الخط
. للقيام بذلك ، يمكنك استخدام جافا سكريبت لتغيير قيمة هذه الخاصية بعدد معين من وحدات البكسل أو النسب المئوية.
يوجد أدناه مثال على الكود الذي يسمح لك بتغيير حجم الخط بالنقر فوق الأزرار المقابلة:
فونتسيزي
حجم الخط
من العنصر.
تحديد حجم الخط
. يمكن أن تكون قيمة هذه السمة رقمية أو رئيسية.
| قيم السمات الرقمية | الخط الوزن |
| يمكن أن يكون على النحو التالي: | المعنى |
| الوصف | 100 |
| خط رفيع (خفيف) | 400 |
| خط عادي (عادي) | 700 |
خط غامق جدا (غامق جدا)
| قيم السمات الرئيسية | الخط الوزن |
يمكن أن يكون على النحو التالي: | المعنى |
الوصف | عادي |
خط عادي (عادي) | جريئة |
خط غامق (غامق) | أخف وزنا |
خط غامق جدا (غامق جدا) فيما يتعلق بالخط الموروث
سيتم عرض هذا النص بالخط العريض.
| في هذا المثال ، سيتم عرض النص بخط غامق. | تغيير لون الخط |
مثال: | الممتلكات | المعنى |
الوصف | اللون | أحمر |
#0000
يضبط اللون الأخضر للخط باستخدام الكود السداسي العشري
اللون
رغب (0 ، 0 ، 255)
تعيين لون الخط الأزرق باستخدام قيم رغب
- الطريقة الأبسط والأكثر شيوعا.
بالنظر إلى هذه الأمثلة ، يمكنك بسهولة تغيير لون الخط على صفحة الويب الخاصة بك وإعطائها الشكل الذي تريده. تذكر أن التباين الجيد بين لون الخلفية ولون الخط يضمن سهولة قراءة النص.
تعيين نمط خط مختلف
الجسم {
الخط الأسرة: "أريال" ، بلا الرقيق;
}
في هذا المثال ، سيبحث الخط أولا عن الخط الأريال ، وإذا لم يكن متاحا ، فسيستخدم الخط بلا الرقيق لخط النظام الحالي.
يمكنك أيضا استخدام أسماء خطوط متعددة لمزيد من المرونة.:
- الجسم {
- الخط الأسرة: "أريال" ، "هلفتيكا نويه" ، هلفتيكا ، بلا الرقيق;
- }
- في هذا المثال ، فإن الخط أولا البحث عن أريال ، ثم هلفتيكا نويه ، ثم هلفتيكا ، وأخيرا استخدام الخط بلا الرقيق من خط النظام الحالي.
- حتى تتمكن من اختيار واستخدام أنماط الخطوط المختلفة لصفحة الويب الخاصة بك باستخدام كس.
- تطبيق التأثيرات على الخط
- يمكنك تطبيق تأثيرات مختلفة على الخط لجعل النص أكثر وضوحا وتعبيرا. وفيما يلي بعض من الآثار المتاحة:
غامق: استخدم العلامة لتمييز النص بالخط العريض.