الخط هو أحد عناصر التصميم المهمة لصفحة الويب. ولكن كيف يمكنني تعيين حجم الخط المطلوب في أتش تي أم أل? في هذه المقالة ، سنلقي نظرة على طرق مختلفة لتعيين حجم الخط في هتمل ونوضح لك كيفية تغييره حسب احتياجاتك.
سيتم تعيين حجم خط الفقرة إلى 1.2 مرات أكبر من حجم الخط المحدد للعنصر الأصل.
يحدد حجم خط الفقرة إلى 16 بكسل. ومع ذلك ، ضع في اعتبارك أن استخدام القيم المطلقة يمكن أن يتسبب في تغيير حجم النص بشكل غير صحيح على الأجهزة والشاشات المختلفة.
تعيين حجم خط الفقرة إلى 120 ٪ من حجم الخط المحدد للعنصر الأصل.
- تأثير حجم الخط على تصور صفحة الويب
- قيمة حجم الخط في هتمل
- كيفية تعيين حجم الخط في كود هتمل
- القدرة على تغيير حجم الخط في هتمل
- أفضل الممارسات لاستخدام حجم الخط في هتمل
تأثير حجم الخط على تصور صفحة الويب
يلعب حجم الخط في تصميم الويب دورا مهما في التصور العام لصفحة الويب من قبل المستخدم. يمكن أن يؤثر حجم الخط الصحيح بشكل كبير على سهولة قراءة النص وسهولة القراءة والانطباع المرئي لموقع الويب.
يمكن أن يجعل الخط الصغير جدا من الصعب قراءة النص ، خاصة للمستخدمين الذين يعانون من ضعف البصر. يمكن أن يسبب أيضا إجهادا ملحوظا للعين عند قراءة المعلومات لفترة طويلة. قد يضطر المستخدمون إلى تكبير الصفحة أو تكبير الشاشة لجعل النص أكثر قابلية للقراءة.
من ناحية أخرى ، يمكن أن يؤدي حجم الخط الكبير جدا إلى حدوث مشكلات في تخطيط وبنية صفحة الويب. عندما يكون الخط كبيرا جدا ، قد لا يتناسب النص مع العنصر الذي يحتوي عليه ، مما يؤدي إلى قص النص أو واصلة النص. يمكن أن يؤدي ذلك إلى تشويه الهيكل العام للصفحة وتقليل مظهرها الاحترافي.
عند اختيار حجم الخط ، من الضروري مراعاة ليس فقط الإدراك البصري ، ولكن أيضا سهولة الاستخدام. يجب أن يكون حجم الخط بحيث يكون النص سهل القراءة ولا يتطلب إجهاد العين المفرط.
يمكن تحديد حجم الخط الأمثل بناء على القواعد المطبعية والتوصيات للقراءة المريحة. غالبا ما يوصى باستخدام حجم خط من 12 إلى 16 بكسل للنص الرئيسي للصفحة لضمان سهولة القراءة والتخطيط الجيد للكتل النصية.
نتيجة لذلك ، يمكن أن يؤدي حجم الخط المحدد بشكل صحيح إلى تحسين تصور صفحة الويب بشكل كبير ، وجعلها في متناول المستخدمين ذوي الاحتياجات المختلفة وضمان قراءة مريحة للنص لفترات طويلة من الزمن.
قيمة حجم الخط في هتمل
يحدد حجم الخط في هتمل حجم النص المحدد بصريا. يمكن التعبير عن قيمة حجم الخط بوحدات قياس مختلفة مثل وحدات البكسل (بكسل) والنسب المئوية ( ٪ ) والنقاط (نقطة) والوحدات النسبية مثل وحدات البكسل النسبية (ريم) وإم وفولكس فاجن.
وحدة بكسل (بكسل)هو الأكثر شيوعا في تطوير الشبكة. يحدد حجم الخط الثابت بالبكسل. على سبيل المثال ، قيمة حجم الخط: 16 بكسل ؛ سيعين النص على حجم خط 16 بكسل.
قيم النسبة المئوية ( ٪ ) قم بتعيين حجم الخط بالنسبة لحجم العنصر الأصل. قيمة حجم الخط: 150%; تعيين حجم الخط إلى 150 ٪ من حجم العنصر الأصل.
يتم استخدام وحدة النقطة (بت) في الطباعة ويحدد حجم الخط الفعلي ، بغض النظر عن دقة الشاشة. قيمة حجم الخط: 12 نقطة ؛ سيضبط النص على حجم خط 12 نقطة.
تسمح لك وحدات القياس النسبية بتعيين حجم النص بناء على سياقه والعنصر المحيط به. تحدد وحدة حركة العين السريعة حجم الخط بالنسبة لحجم خط العنصر الجذر للصفحة. قيمة حجم الخط: 1.2 ريم ؛ يحدد حجم خط النص يساوي 1.2 حجم خط العنصر الجذر.
تحدد وحدة القياس أيضا حجم الخط بالنسبة للنص المحيط. قيمة حجم الخط: 1.5 م ؛ يحدد حجم الخط إلى 1.5 حجم الخط للعنصر الأصل.
تعتمد وحدة قياس فولكس فاجن على عرض منطقة عرض المستخدم وتحدد حجم الخط كنسبة مئوية من عرض العرض. قيمة حجم الخط: 5 فولت واط; تعيين حجم الخط إلى 5٪ من عرض إطار العرض.
عند تعيين حجم الخط في هتمل ، فمن الضروري أن تأخذ في الاعتبار إمكانية الوصول وقراءة النص على شاشات وأجهزة مختلفة. يوصى باستخدام وحدات القياس النسبية ، مثل إم أو ريم ، لإنشاء تصميم تكيفي ويمكن الوصول إليه.
كيفية تعيين حجم الخط في كود هتمل
- سيكون لهذا النص حجم خط 1.
- سيكون لهذا النص حجم خط 2.
- سيكون لهذا النص حجم خط 3.
- سيكون لهذا النص حجم خط 4.
- سيكون لهذا النص حجم خط 5.
- سيكون لهذا النص حجم خط 6.
- سيكون لهذا النص حجم خط 7.
هناك طريقة أخرى وهي استخدام سمة *النمط* في علامة ** أو عنصر آخر. على سبيل المثال:
سيكون لهذا النص حجم خط 12 بكسل.
سيكون لهذا النص حجم خط 14 بكسل.
سيكون لهذا النص حجم خط 16 بكسل.
يمكنك أيضا استخدام وحدات القياس المطلقة ،مثل* نقطة *(نقاط) أو* سم * (سنتيمترات) ، بدلا من وحدات البكسل. على سبيل المثال:
سيكون لهذا النص حجم خط 12 نقطة.
سيكون لهذا النص حجم خط 1 سم.
استخدم هذه الطرق لتعيين حجم الخط المطلوب في شفرة هتمل وتحقيق التأثير المرئي المطلوب على صفحة الويب الخاصة بك.
القدرة على تغيير حجم الخط في هتمل
هناك عدة طرق لتعيين وتغيير حجم الخط في هتمل. يتم سرد بعض منهم أدناه:
- باستخدام العلامة
- باستخدام سمة النمط
- استخدام أوراق الأنماط الخارجية (كس)
1. باستخدام العلامة
تسمح لك العلامة بتغيير حجم الخط في هتمل. لتحديد حجم الخط ، يتم استخدام سمة الحجم ، والتي تأخذ القيم من 1 إلى 7 ، حيث 1 هو أصغر حجم و 7 هو الأكبر. مثال الاستخدام:
سيكون هذا النص متوسط حجم الخط
من 2. باستخدام سمة النمط
تسمح لك سمة النمط بتطبيق أنماط كس على العناصر الفردية في هتمل. يتم استخدام خاصية حجم الخط لتغيير حجم الخط. مثال الاستخدام:
سيكون لهذا النص حجم خط 18 بكسل
3. استخدام أوراق الأنماط الخارجية (كس)
الطريقة الأكثر مرونة والموصى بها لتغيير حجم الخط في هتمل هو استخدام أوراق الأنماط الخارجية (كس). في كس ، يمكنك تعيين حجم الخط باستخدام خاصية حجم الخط. مثال الاستخدام:
يمكنك أيضا استخدام وحدات القياس النسبية في كس ، مثل النسب المئوية ( ٪ ) ، إم أو ريم. على سبيل المثال ، لتغيير حجم الخط بالنسبة إلى حجم العنصر الأصل ، يمكنك استخدام الخاصية حجم الخط مع قيمة النسبة المئوية أو م:
أفضل الممارسات لاستخدام حجم الخط في هتمل
1. استخدام وحدات القياس النسبية
عند تعيين حجم الخط في هتمل ، فمن المستحسن استخدام وحدات القياس النسبية ، مثل النسب المئوية ( ٪ ) أو إم. سيساعد هذا في الحفاظ على علاقة متناسبة بين عناصر صفحة الويب وتوفير تحجيم أكثر مرونة.
2. ضع في اعتبارك سهولة قراءة النص
من المهم اختيار حجم الخط الأمثل الذي يضمن قراءة مريحة للنص للمستخدمين. يوصى باستخدام حجم خط من 16 إلى 20 بكسل للمحتوى الرئيسي و 12 بكسل على الأقل للحصول على معلومات إضافية أو عناصر صغيرة.
3. أنماط إضافية لتسليط الضوء على النص
بالإضافة إلى تعيين حجم الخط ، يمكنك استخدام أنماط إضافية لتمييز النص. على سبيل المثال ، استخدام علامة أو لجعل النص غامقا أو مائلا ، على التوالي.
4. اختبار على أجهزة مختلفة
قبل نشر صفحة ويب بحجم خط محدد ، يوصى باختبار عرضها على أجهزة مختلفة ودقة الشاشة. سيساعد هذا في ضمان بقاء النص قابلا للقراءة وسهل الاستخدام على منصات مختلفة ومجموعات مستخدمين مختلفة.
5. الامتثال للمنطق الظرفية
كن حذرا عند اختيار حجم الخط اعتمادا على سياق النص والغرض منه. على سبيل المثال ، قد تكون العناوين أكبر حجما لجذب الانتباه ، بينما قد تكون الحواشي السفلية أو التسميات التوضيحية أقل تعبيرا.
باتباع أفضل الممارسات هذه ، ستتمكن من إنشاء صفحات ويب بنص مقروء وجمالي يكون مناسبا للمستخدمين.