يعد اختيار حجم الخط المناسب جانبا مهما عند إنشاء صفحة ويب. يمكن أن يؤثر حجم الخط على سهولة قراءة النص وراحة إدراكه ، بالإضافة إلى التصميم العام للصفحة وأسلوبها. هناك عدة طرق لتحديد حجم الخط في هتمل ، واحدة من الأكثر شعبية هو استخدام نمط.
لتحديد حجم الخط في هتمل باستخدام نمط ، يمكنك استخدام سمة العرض ("حجم الخط") أو سمة الحجم ("حجم الخط"). على سبيل المثال ، إذا كنت ترغب في تعيين حجم الخط إلى 12 بكسل ، يمكنك استخدام التعليمات البرمجية التالية:
نموذج النص
يمكنك أيضا استخدام وحدات القياس النسبية ، مثل النسب المئوية أو القيم النسبية ، لتعيين حجم الخط بالنسبة لعناصر الصفحة الأخرى. على سبيل المثال ، لجعل حجم الخط أكبر 1.5 مرة ، يمكنك استخدام التعليمات البرمجية التالية:
نموذج النص
يعتمد اختيار حجم الخط على العديد من العوامل ، مثل الغرض من الصفحة والجمهور المستهدف وعناصر التصميم الأخرى وما إلى ذلك. من المهم أن تتذكر أن حجم الخط يجب أن يكون سهل القراءة ويتناسب مع النمط العام والتفضيلات الجمالية للصفحة.
- كيفية اختيار حجم الخط
- تحديد حجم النص
- استخدام وحدات القياس المطلقة
- استخدام وحدات القياس النسبية
- تحديد حجم الخط في نمط المغلق
- التحقق من حجم الخط على شاشات مختلفة
- تكييف حجم الخط للأجهزة المحمولة
- نصائح لاختيار حجم الخط الأمثل
كيفية اختيار حجم الخط
يمكن تحديد حجم الخط في هتمل باستخدام النمط. يتم استخدام خاصية" حجم الخط " لتحديد حجم الخط. يمكن التعبير عن هذه الخاصية بوحدات قياس مختلفة ، مثل وحدات البكسل (بكسل) أو النسب المئوية ( ٪ ) أو "إم".
وحدة القياس" بكسل " مطلقة وتحدد حجم خط ثابت. على سبيل المثال ، النمط " حجم الخط: 14 بكسل;"يشير إلى أن حجم الخط سيكون 14 بكسل.
تسمح لك وحدة القياس " ٪ " بتحديد حجم الخط بالنسبة لحجم العنصر الأصل. على سبيل المثال ، سيؤدي نمط" حجم الخط: 120 ٪ ؛ " إلى زيادة حجم الخط بنسبة 20 ٪ بالنسبة إلى حجم العنصر الأصلي.
وحدة القياس "م"كما يسمح لك لتحديد حجم الخط بالنسبة لحجم العنصر الأصلي. ومع ذلك ، على عكس النسب المئوية ، فإن قيمة "م" نسبية بناء على حجم الخط الحالي. على سبيل المثال ، النمط "حجم الخط: 1.2 م ؛" سيزيد حجم الخط بنسبة 20 ٪ بالنسبة لحجمه الحالي.
وبالتالي ، يعتمد اختيار حجم الخط على متطلبات التصميم ومن الضروري مراعاة السياق والغرض من استخدام النص على صفحة الويب. يجب أن يكون حجم الخط قابلا للقراءة وسهل الاستخدام بشكل كاف.
تحديد حجم النص
يمكن تحديد حجم النص في هتمل باستخدام نمط كس. يتم استخدام خاصية حجم الخط لهذا الغرض. على سبيل المثال:
يبلغ حجم هذا النص 16 بكسل.
يتم تحديد قيمة خاصية حجم الخط بالبكسل (بكسل) أو النسب المئوية ( ٪ ) أو وحدات القياس الأخرى. يجب أن نتذكر أن حجم النص يمكن أن يكون نسبيا أو مطلقا.
يتغير الحجم النسبي بالنسبة إلى حجم العنصر الأصل أو الحجم الافتراضي للمتصفح. على سبيل المثال ، يمكنك تحديد حجم الخط: 150 ٪ لجعل النص أكبر بنسبة 50٪.
يتم تعيين الحجم المطلق بقيمة محددة. على سبيل المثال ، يمكنك تحديد حجم الخط: 20 بكسل لتعيين حجم النص إلى 20 بكسل.
من المهم أن تضع في اعتبارك أن حجم النص قد يختلف في المتصفحات المختلفة وعلى الأجهزة المختلفة. لذلك ، يوصى باستخدام وحدات القياس النسبية لإنشاء صفحات ويب تكيفية ومتداخلة.
استخدام وحدات القياس المطلقة
يحتوي هتمل على عدة وحدات قياس مطلقة يمكن استخدامها لتعيين أحجام الخطوط. يضمنون أن حجم الخط سيكون هو نفسه على أي جهاز.
إحدى وحدات القياس هذه هي البكسل (بكسل). البكسل هو أصغر وحدة قياس تستخدم على شاشة الكمبيوتر. يمكنك تعيين حجم الخط باستخدام قيمة بالبكسل ، على سبيل المثال:
يحتوي هذا النص على حجم خط 16 بكسل
يبلغ حجم خط هذا النص نصف بوصة
يمكن أن يؤدي استخدام البوصات أيضا إلى حدوث مشكلات ، حيث يمكن أن تختلف أحجام شاشات الأجهزة بشكل كبير.
أخيرا ، وحدة القياس المطلقة الثالثة هي المليمتر (مم). المليمتر هو وحدة قياس مترية تستخدم في معظم البلدان. يمكنك تعيين حجم الخط باستخدام قيمة بالمليمترات ، على سبيل المثال:
يبلغ حجم خط هذا النص 10 ملليمترات
يتيح لك استخدام المليمترات ضبط حجم الخط بدقة ، وهي أفضل من وحدات البكسل أو البوصة.
من المهم أن تتذكر أنه عند اختيار حجم الخط باستخدام وحدات القياس المطلقة ، سيبقى دون تغيير عند تغيير حجم الصفحة أو تغيير حجم نافذة المتصفح. لذلك ، يجب استخدام الوحدات المطلقة بعناية والنظر في بدائل مثل وحدات القياس النسبية.
استخدام وحدات القياس النسبية
عند اختيار حجم الخط لموقع الويب الخاص بك باستخدام الأنماط ، لا يمكنك استخدام القيم المطلقة مثل وحدات البكسل أو النقاط فحسب ، بل يمكنك أيضا استخدام وحدات القياس النسبية. تسمح لك الوحدات النسبية بضبط حجم الخط اعتمادا على بيئة الصفحة أو محتواها ، مما يجعلها أكثر مرونة وتكيفا.
تحديد حجم الخط في نمط المغلق
1. الحجم المطلق: يمكنك تعيين حجم خط معين ، على سبيل المثال ، بالبكسل أو النقاط. على سبيل المثال:
2. الحجم النسبي: يمكنك تعيين حجم الخط بالنسبة لحجم خط العنصر الأصل. على سبيل المثال:
3. استخدام الكلمات الرئيسية: يمكنك استخدام كلمات رئيسية مثل الصغيرة والمتوسطة والكبيرة وما إلى ذلك. لتعيين حجم الخط. على سبيل المثال:
ص {
حجم الخط: صغير;
| } | يمكن تحديد حجم الخط في نمط كس في وحدات مختلفة من القياس ، مثل بكسل (بكسل) ، النسب المئوية ( ٪ ) ، نقطة (بت) وغيرها. يمكنك اختيار وحدة القياس المناسبة حسب احتياجاتك. |
|---|---|
| تذكر أنه من الأفضل استخدام وحدات القياس النسبية ، مثل وحدات البكسل أو النسب المئوية ، لتعيين حجم الخط. هذا يساعد على الحفاظ على المرونة والقدرة على التكيف لتصميم صفحة الويب. | التحقق من حجم الخط على شاشات مختلفة |
| عند اختيار حجم الخط في هتمل ، من المهم النظر في كيفية عرضه على شاشات مختلفة. قد يكون حجم الخط الذي قد يبدو مثاليا على أحد الأجهزة صغيرا جدا أو كبيرا جدا على جهاز آخر. لذلك ، يوصى بالتحقق من حجم الخط على شاشات مختلفة. | طريقة واحدة للتحقق من حجم الخط هو استخدام جدول في هتمل. إنشاء جدول مع عمودين: |
| حجم الخط | عرض |
10 بكسل
نص بحجم خط 10 بكسل
12 بكسل
نص بحجم خط 12 بكسل
14 بكسل
نص بحجم خط 14 بكسل
في هذا الجدول ، يمكنك إضافة أحجام خطوط مختلفة إلى العمود الأول ومعرفة كيفية عرضها في العمود الثاني. إذا كان حجم الخط صغيرا جدا أو كبيرا على شاشتك ، فيمكنك تغييره لتحقيق أفضل نتيجة.
بالإضافة إلى ذلك ، يمكنك استخدام أدوات مطور المتصفح للتحقق من حجم الخط على شاشات مختلفة. افتح صفحة الويب مع النص والتبديل إلى وضع المطور. هناك يمكنك تغيير حجم الخط ورؤيته معروضا في الوقت الفعلي على شاشات مختلفة.
نتيجة لذلك ، سيساعدك التحقق من حجم الخط على شاشات مختلفة في اختيار حجم الخط الأمثل الذي سيكون قابلا للقراءة وسهل الاستخدام على أجهزة مختلفة.
تكييف حجم الخط للأجهزة المحمولة
هناك عدة طرق لتعيين حجم الخط في هتمل. أحدها هو استخدام القيم المطلقة مثل وحدات البكسل أو النقاط. ومع ذلك ، على الأجهزة المحمولة ، من الأفضل استخدام القيم النسبية مثل النسب المئوية أو م (حجم الخط بالنسبة للحجم الحالي).
يمكنك استخدام استعلامات الوسائط لتكييف حجم الخط للأجهزة المحمولة. تسمح لك استعلامات الوسائط بإضافة أنماط تنطبق فقط في ظل ظروف معينة ، مثل عرض الشاشة أو الجهاز.
مثال على استخدام استعلامات الوسائط لتكييف حجم الخط:
@شاشة الوسائط و (أقصى عرض: 768 بكسل) {
ص {
حجم الخط: 14 بكسل;
}
}
@شاشة الوسائط و (أقصى عرض: 480 بكسل) {
ص {
حجم الخط: 12 بكسل;
}
}
في المثال أعلاه ، إذا كان عرض الشاشة أقل من أو يساوي 768 بكسل ، فسيكون حجم الخط في الفقرات 14 بكسل. إذا كان عرض الشاشة أقل من أو يساوي 480 بكسل ، فسيكون حجم الخط 12 بكسل. وبالتالي ، عند التكيف مع الأجهزة المحمولة ، سينخفض حجم الخط لضمان سهولة قراءة أفضل.
نصائح لاختيار حجم الخط الأمثل
1. النظر في الغرض من الموقع:
الخطوة الأولى عند اختيار حجم الخط هي تحديد الغرض من موقعك. إذا كان هدفك هو توفير المعلومات ، فمن الأفضل اختيار حجم خط متوسط أو كبير لضمان سهولة القراءة. إذا تم تصميم الموقع لجذب الانتباه أو بيع المنتجات ، يمكنك استخدام خط أكبر لجذب انتباه الزوار.
2. النظر في السياق:
السياق الذي سيتم استخدام الخط فيه مهم أيضا. على سبيل المثال ، إذا كنت تقوم بإنشاء موقع ويب لقراءة مقالات طويلة ، فمن الأفضل اختيار خط أصغر لوضع المزيد من النص على الصفحة. إذا كنت تريد تمييز جزء من النص ، مثل العناوين أو علامات الاقتباس ، فيمكنك استخدام حجم خط أكبر للفت الانتباه إلى هذه العناصر.
3. تجنب الخط الصغير جدا أو الكبير جدا: