الانتقال إلى المحتوى الرئيسي

خطوط هتمل: النمط والحجم-كل ما تحتاج إلى معرفته

الخطوط هي أحد الجوانب الرئيسية لتصميم الويب. يلعبون دورا مهما في إنشاء أسلوب فريد وضمان سهولة قراءة النص على صفحات الويب. يوفر هتمل العديد من الخيارات لتخصيص الخطوط ، بما في ذلك اختيار النمط والحجم.

يحدد نمط الخط مظهره ، بما في ذلك الغامق والإمالة والتسطير. يوفر هتمل عدة سمات للتحكم في نمط الخط. على سبيل المثال ، باستخدام سمة وزن الخط ، يمكنك تعيين محتوى الدهون في النص: عادي (قياسي) أو غامق (غامق) أو أفتح (أقل غامق).

يتم تحديد حجم الخط في هتمل بالبكسل أو النسب المئوية أو وحدات القياس الأخرى. يمكنك استخدام سمة حجم الخط لتحديد حجم الخط. يمكن أن تكون قيم هذه السمة رقمية (على سبيل المثال ، 12 بكسل) أو نسبية (على سبيل المثال ، 100٪). تسمح لك القيم النسبية بتكييف حجم الخط مع حجم نافذة المتصفح أو الجهاز الذي يتم عرض صفحة الويب عليه.

من المهم أن تتذكر أنه عند اختيار الخط ، من الضروري مراعاة سهولة قراءته وتوافقه مع المتصفحات المختلفة. قد يتم عرض بعض الخطوط بشكل مختلف في المتصفحات وأنظمة التشغيل المختلفة. يجب أيضا أن تضع في اعتبارك إمكانية الوصول إلى الخطوط للمستخدمين ذوي الإعاقة: اختر خطوطا يسهل قراءتها بأحجام صغيرة وكبيرة.

يوفر هتمل خيارات واسعة لتخصيص نمط الخط وحجمه. معرفة أساسيات هتمل وأفضل الممارسات ، سوف تكون قادرة على خلق نص جميل وقابل للقراءة على صفحات الويب الخاصة بك.

  1. خطوط هتمل: قواعد التصميم وطرق التغيير
  2. القواعد الأساسية لاختيار الخطوط وأسلوبها
  3. كيفية تغيير حجم الخط في هتمل باستخدام كس
  4. علامات هتمل الخاصة لتسطير النص وتسليط الضوء عليه
  5. أمثلة على استخدام الخطوط في هتمل

خطوط هتمل: قواعد التصميم وطرق التغيير

يوفر هتمل خيارات مختلفة لتغيير مظهر النص ، بما في ذلك الخطوط. أدناه سوف ننظر في بعض القواعد لتصميم الخطوط وطرق لتغيير حجمها وأسلوبها.

1. تغيير حجم الخط:

  • لتغيير حجم الخط ، استخدم,,,, العلامات
  • لتغيير حجم الخط داخل الفقرات أو عناصر النص الأخرى ، استخدم العلامات

2. تغيير نمط الخط:

  • قم بتطبيق العلامة أو لتمييز النص بالخط العريض.
  • استخدم علامة أو لجعل النص مائلا.
  • لإنشاء نص تحته خط ، لفه في علامة.
  • اجمع العلامات أعلاه للحصول على نص مائل غامق أو مجموعات أنماط أخرى.

3. استخدام الخطوط من مصدر خارجي:

  • لاستخدام خطوط أخرى غير الخطوط القياسية للمتصفح ، يمكنك استخدام خدمات وأدوات خاصة مثل خطوط جوجل.
  • قم بتوصيل الخط من مصدر خارجي باستخدام العلامة وسمات هريف و ريل.
  • بعد توصيل الخط ، استخدمه باستخدام خاصية عائلة الخط المغلق.

4. تغيير لون النص:

  • تغيير لون النص باستخدام خاصية لون المغلق.
  • يمكنك استخدام أسماء ألوان محددة مسبقا (على سبيل المثال ، " أحمر "أو" أزرق") أو تعيين القيمة في شكل سداسي عشري (#ف 0000 للأحمر ، إلخ.).

من المهم أن نتذكر أن تغيير الخطوط وتصميمها يجب أن يتم مع الأخذ في الاعتبار سهولة قراءة النص والامتثال للغرض والسياق. استخدم الطرق الموصوفة لتغيير الخطوط بحكمة حتى يظل النص قابلا للقراءة وممتعا من الناحية الجمالية.

القواعد الأساسية لاختيار الخطوط وأسلوبها

1. سهولة القراءة: يجب أن يكون المعيار الرئيسي لاختيار الخط هو سهولة قراءته. يجب أن يكون الخط سهل القراءة ولا يسبب صعوبات عند قراءة النص.

2. النمط: من المهم اختيار الخطوط بأسلوب يطابق التصميم العام لصفحة الويب. يمكن أن تكون الخطوط كلاسيكية وحديثة وبسيطة وما إلى ذلك. يجب أن يؤكد نمط الخط على الفكرة الرئيسية والمزاج للصفحة.

3. التوافق: يجب أن تكون الخطوط متوافقة مع المتصفحات والأجهزة المختلفة. انتبه إلى التوافق عبر المتصفحات ودعم الخطوط على الأجهزة المحمولة.

4. اختلاف الخط: يمكن أن يؤدي استخدام خطوط متعددة في صفحة ويب واحدة إلى إضفاء مظهر مثير للاهتمام عليها. ومع ذلك ، يجب ألا تفرط في عددهم لتجنب التحميل الزائد على الصفحة بالنص والإدراك المفكك.

5. الحجم: يجب أن يكون حجم الخط مثاليا لقراءة النص ، في المتوسط من 16 إلى 20 بكسل. تأكد من التحقق من كيفية ظهور الخط وحجمه على الأجهزة والدقة المختلفة.

6. أنماط إضافية: يمكنك أيضا استخدام أنماط إضافية مثل غامق ومائل وشرطات سفلية وغيرها لإبراز أجزاء مهمة من النص أو إنشاء تصميم مذهل.

باتباع هذه القواعد الأساسية ، ستتمكن من إنشاء تصميم صفحة ويب جذاب وقابل للقراءة باستخدام الخطوط الصحيحة وأنماطها.

كيفية تغيير حجم الخط في هتمل باستخدام كس

يمكن لمطوري الويب استخدام كس (أوراق الأنماط المتتالية) لتغيير حجم الخط في مستندات هتمل. يتيح لهم ذلك التحكم في مظهر النص على صفحة الويب وإنشاء محتوى مبهج من الناحية الجمالية وقابل للقراءة.

هناك عدة طرق لتغيير حجم الخط باستخدام كس:

  • يحدد حجم الخط إلى 16 بكسل.
  • يزيد حجم الخط بنسبة 50٪ من قيمته الأصلية.
  • يحدد حجم خط صغير.

. على سبيل المثال:

  • - يحدد حجم الخط للمستند بأكمله إلى 14 بكسل.

إذا كنت تريد تعيين حجم الخط لعنصر معين فقط ، فيمكنك استخدام محدد يطابق هذا العنصر. على سبيل المثال:

  • - يحدد حجم الخط لرأس المستوى الأول بمقدار 24 بكسل.

بالإضافة إلى تغيير حجم الخط ، يوفر كس أيضا خيارات أخرى لتخصيص مظهر النص ، مثل تغيير الخط واللون والسمك. باستخدام هذه الميزات ، يمكنك إنشاء تصميمات فريدة وجذابة لصفحات الويب الخاصة بك.

علامات هتمل الخاصة لتسطير النص وتسليط الضوء عليه

يوفر لنا هتمل العديد من العلامات التي تسمح لنا بتسطير أو تمييز أجزاء معينة من النص على صفحة الويب.

واحدة من هذه العلامات هي . يتم استخدامه لتسليط الضوء على جزء من النص مهم أو مهم بشكل خاص. عادة ما تعرض المتصفحات النص المميز بالخط العريض. على سبيل المثال:

هذا نص مهم جدا!

قالوا إنه مهم جدا!

الآن لديك علامتان خاصتان تسمحان لك بتمييز أجزاء النص أو تسطيرها على صفحة الويب الخاصة بك.

أمثلة على استخدام الخطوط في هتمل

1. ضبط الخط بالطريقة القياسية:

سيتم عرض هذا النص بخط أريال.

2. تركيب الخط باستخدام نمط المغلق:

سيتم عرض هذا النص في تايمز نيو رومان.

3 الخط. توصيل خط مخصص باستخدام ملف خارجي: