يعد حجم خط هتمل لحقل الإدخال جانبا مهما في تطوير نماذج الويب والواجهات. يمكن أن يؤدي اختيار حجم الخط الصحيح إلى تحسين قابلية استخدام وقراءة حقول الإدخال على موقع الويب الخاص بك بشكل كبير.
ومع ذلك ، فإن اختيار حجم الخط الأمثل ليس بالأمر السهل دائما. هناك عدة طرق لتعيين حجم خط حقل الإدخال في هتمل ، كل منها له خصائصه وتوصياته الخاصة.
غالبا ما يتم تعيين حجم خط حقل الإدخال باستخدام سمة الحجم. يسمح لك بتحديد عدد الأحرف المعروضة في حقل الإدخال ، اعتمادا على حجم الخط المحدد. ومع ذلك ، ضع في اعتبارك أن سمة الحجم قديمة ، ويوصى باستخدام خاصية حجم الخط المغلق لتعيين حجم الخط لحقل الإدخال.
طريقة أخرى لتحديد حجم الخط من حقل الإدخال هو استخدام كس. على سبيل المثال ، يمكنك تحديد حجم الخط لجميع حقول الإدخال على موقعك عن طريق تعيين القيم بالبكسل أو النسب المئوية. يمكنك أيضا تعيين حجم الخط لكل حقل إدخال بشكل منفصل عن طريق تطبيق الفئات أو المعرفات.
في هذه المقالة ، سوف ننظر في الطرق والتوصيات الرئيسية لاختيار حجم الخط لحقول الإدخال في هتمل. سننظر أيضا في مشكلات إمكانية الوصول والتوافق عند اختيار حجم الخط. سيجعل حجم الخط الأمثل المحدد لحقول الإدخال موقع الويب الخاص بك أكثر سهولة في الاستخدام وجاذبية للمستخدمين.
- الطرق الرئيسية لتغيير حجم الخط في حقل الإدخال
- تغيير حجم الخط باستخدام الخاصية المغلق حجم الخط
- استخدام سمة الحجم لتعيين حجم ثابت لحقل الإدخال
- تعيين حجم الخط النسبي باستخدام خاصية حجم الخط المغلق
- ضبط حجم الخط باستخدام الأنماط الخارجية
- استخدام استعلامات الوسائط لتغيير حجم الخط بشكل تكيفي في حقول الإدخال
الطرق الرئيسية لتغيير حجم الخط في حقل الإدخال
في هتمل ، هناك عدة طرق لتغيير حجم الخط في حقل الإدخال. أدناه سوف ننظر إلى أربعة منهم:
:
في العلامة
:
في هذا المثال ، سيكون حجم الخط في حقل الإدخال 14 بكسل.
3. باستخدام ملف كس خارجي:
.حقل الإدخال {
حجم الخط: 16 بكسل;
في هذا المثال ، سيكون حجم الخط في حقل الإدخال 16 بكسل. يتم تعيين النمط من قبل الطبقة
حقل الإدخال
.
.
يعتمد اختيار الطريقة على تفضيلاتك ومتطلبات المشروع. لا تنس أن تغيير حجم الخط يمكن أن يؤثر على مظهر النموذج وقابليته للاستخدام.
يمكن أن تكون القيمة قيمة مطلقة أو نسبية لحجم الخط. القيم المطلقة مثل
حزب العمال
- م
- ريم
- أمثلة على استخدام خصائص كس
- لتغيير حجم الخط في حقل الإدخال:
حجم الخط: 14 بكسل;
- يحدد حجم الخط إلى 14 بكسل;
حجم الخط: 1.2 م;
- تعيين حجم الخط إلى 1.2 أضعاف حجم الخط للعنصر الأصل;
حجم الخط: 16 نقطة;
حجم الخط: 2ريم;
- تعيين حجم الخط إلى 2 أضعاف حجم الخط الأساسي للمستند.
يوصى باستخدام القيم النسبية لحجم الخط ، لأنها تسمح لك بإنشاء عناصر نموذج أكثر تكيفا ومرونة من شأنها أن تتوسع بشكل أفضل على الأجهزة المختلفة وعند تغيير حجم نافذة المتصفح.
يجب أن يؤخذ في الاعتبار أيضا أن المستخدمين غالبا ما يضبطون تفضيلات حجم الخط في إعدادات المتصفح الخاصة بهم. لذلك ، لا يوصى باستخدام حجم خط صغير جدا أو كبير جدا ، مما قد يجعل من الصعب قراءة النص أو عرضه بشكل مريح.
استخدام سمة الحجم لتعيين حجم ثابت لحقل الإدخال
يتم استخدام سمة الحجم في هتمل لتحديد حجم ثابت لحقل الإدخال. يسمح لك بتعيين عرض الحقل بالأحرف ، لكنه لا يؤثر على الارتفاع.
- مثال على استخدام سمة الحجم:
في هذا المثال ، سيكون لحقل الإدخال عرض يقابل 20 حرفا.
ومع ذلك ، ضع في اعتبارك أن استخدام سمة الحجم قد لا يعطي النتيجة المرجوة على جميع الأجهزة وفي المتصفحات المختلفة. قد تختلف أحجام الأحرف اعتمادا على الخطوط المثبتة وإعدادات المستخدم.
بالإضافة إلى ذلك ، في التطوير الحديث لتقنيات الويب ، فإن استخدام سمة الحجم ليس الطريقة الموصى بها لتعيين حجم حقل الإدخال. فمن المستحسن استخدام كس لمراقبة أكثر مرونة ودقة على حجم حقول الإدخال.
تعيين حجم الخط النسبي باستخدام خاصية حجم الخط المغلق
كس لديها العديد من وحدات القياس النسبية التي يمكن استخدامها لتعيين حجم الخط:
م: يشير إلى حجم خط العنصر الأصل. على سبيل المثال ، إذا كان العنصر الأصل يحتوي على حجم خط 16 بكسل وقمت بتعيين حجم الخط في حقل الإدخال إلى 1.5 م ، ثم حجم الخط في حقل الإدخال سيكون 24 بكسل;
حركة العين السريعة: يشير إلى حجم خط عنصر الجذر. وحدة القياس هذه مفيدة لإنشاء تناسق أحجام الخطوط في جميع أنحاء المستند.;
% : تعيين حجم الخط كنسبة مئوية من حجم الخط للعنصر الأصل. على سبيل المثال ، إذا كان حجم خط العنصر الأصل هو 16 بكسل ، وقمت بتعيين حجم خط حقول الإدخال إلى 150 ٪ ، فسيكون حجم خط حقول الإدخال 24 بكسل.
على سبيل المثال ، لتعيين حجم الخط النسبي في حقل الإدخال ، يمكنك إضافة القاعدة التالية إلى كتلة نمط كس:
الإدخال [النوع="نص"] {
حجم الخط: 1.2 ريم;
}
تحدد هذه القاعدة حجم الخط في حقل الإدخال إلى 1.2 ضعف حجم خط العنصر الجذر.
عند استخدام وحدات القياس النسبية لحجم الخط في حقول الإدخال ، من المهم أن تتذكر أنها موروثة من العناصر الأصلية. لذلك ، إذا كنت ترغب في إنشاء حجم خط موحد في جميع أنحاء المستند ، فقد يكون تعيين حجم الخط في العنصر الجذر باستخدام خاصية حجم الخط المغلق حلا جيدا.