يمكن أن يؤثر اختيار حجم الخط الصحيح بشكل كبير على سهولة قراءة النص والإدراك البصري للمعلومات. بشكل دوري ، يصبح من الضروري تقليل حجم الخط على صفحة الويب لجعل النص أكثر إحكاما وتوازنا.
هناك عدة طرق لتغيير حجم الخط التي يسهل تطبيقها على مستوى كس. أولا ، يمكنك استخدام القيم النسبية مثل النسب المئوية أو م. على سبيل المثال ، سيؤدي تعيين حجم الخط إلى 80 ٪ إلى تقليل حجم الخط بنسبة 20 ٪ بالنسبة للعنصر الأصل.
طريقة أخرى هي استخدام القيم المطلقة مثل وحدات البكسل أو النقاط. على سبيل المثال ، تعيين حجم الخط: 12 بكسل سيحدد حجم الخط إلى 12 بكسل ، بغض النظر عن العنصر الأصلي.
من المهم أن تضع إمكانية الوصول في الاعتبار عند تغيير حجم الخط. تأكد من أن النص يظل قابلا للقراءة بدرجة كافية للأشخاص الذين يعانون من ضعف البصر أو على الأجهزة منخفضة الدقة.
- كيفية تغيير حجم الخط: نصائح عملية
- باستخدام سمة النمط
- باستخدام فئات كس
- أحجام الخطوط في تصميم الويب: المصطلحات الأساسية
- كيفية تقليل حجم الخط في رمز هتمل دون كس
- زيادة وتقليل الخط باستخدام خاصية حجم الخط المغلق
- تغيير حجم الخط في العناوين والفقرات
- تغيير حجم الخط داخل كتل النص
كيفية تغيير حجم الخط: نصائح عملية
يمكن أن يكون تغيير حجم الخط مفيدا عندما تحتاج إلى جعل النص أكثر قابلية للقراءة أو العكس ، وتوفير مساحة على الصفحة. يقدم هذا القسم نصائح عملية لتغيير حجم الخط في أتش تي أم أل.
باستخدام سمة النمط
أسهل طريقة لتغيير حجم الخط هي استخدام سمة النمط. تتيح لك هذه السمة تعيين الأنماط مباشرة في العلامة. لتغيير حجم الخط ، استخدم خاصية حجم الخط.
مثال:
نص بخط صغير
نص بخط كبير
في الأمثلة المقدمة ، يتم تعيين حجم الخط بالبكسل. يمكنك أيضا استخدام وحدات قياس أخرى مثل إم أو ريم أو النسب المئوية.
باستخدام فئات كس
هناك طريقة أخرى لتغيير حجم الخط وهي استخدام فئات كس. تسمح لك فئات كس بتحديد الأنماط مرة واحدة وتطبيقها على عناصر متعددة.
مثال:
نص خط صغير
نص بخط كبير
في المثال أعلاه ، حددنا فئتين -.نص صغير و .نص كبير. ثم طبقنا هذه الفئات على الفقرات المقابلة باستخدام سمة الفئة.
استخدام فئات كس أكثر مرونة ويسمح لك بتغيير الأنماط بسرعة في جميع أنحاء الصفحة ، وتجنب تكرار التعليمات البرمجية.
الآن أنت تعرف طريقتين رئيسيتين لتغيير حجم الخط في هتمل. اختر الخيار المناسب لمشروعك وقم بإنشاء نص جذاب وقابل للقراءة.
أحجام الخطوط في تصميم الويب: المصطلحات الأساسية
في تصميم الويب ، يلعب حجم الخط دورا مهما في إنشاء واجهة مستخدم جمالية وسهلة الاستخدام. سيساعدك فهم المصطلحات الأساسية المتعلقة بأحجام الخطوط على تعيين الحجم الصحيح بدقة وإنشاء تصميم متناغم لموقعك.
الأحجام المطلقة:
يتم تعيين أحجام الخطوط المطلقة عن طريق تحديد قيمة محددة بوضوح بالبكسل أو النقاط أو وحدات القياس الأخرى. على سبيل المثال ، حجم الخط: 14 بكسل; يحدد حجم الخط إلى 14 بكسل.
الأبعاد النسبية:
يتم تحديد أحجام الخطوط النسبية بالنسبة لحجم النص الأساسي. على سبيل المثال ، حجم الخط: 1.2 م ؛ سيحدد حجم الخط إلى 20 ٪ أكبر من الحجم الأساسي.
قيمة م هي وحدة قياس لأحجام الخطوط النسبية ، والتي تستند إلى الحجم الأساسي للنص في العنصر الأصل. يمكن تعيين قيمة م لأي عنصر على الصفحة ويأخذ في الاعتبار التسلسل الهرمي لعناصر التداخل.
قيمة الريم هي وحدة قياس تأخذ كأساس الحجم الأساسي للنص في العنصر الجذر (هتمل). تتيح لك قيمة حركة العين السريعة إنشاء بنية أكثر قابلية للتنبؤ بأحجام النص على الصفحة.
التحجيم:
التحجيم هو تغيير حجم الخط على الصفحة اعتمادا على حجم نافذة المتصفح أو تفضيلات المستخدم. هذا مفيد لإنشاء تصميم سريع الاستجابة سيبدو جيدا على الأجهزة المختلفة.
خاتمة:
يعد تغيير أحجام الخطوط جزءا مهما من تصميم الويب. سيسمح لك الاستخدام الواعي للأحجام المطلقة والنسبية ، بالإضافة إلى القياس ، بإنشاء واجهة جذابة وسهلة الاستخدام لمستخدمي موقعك.
كيفية تقليل حجم الخط في رمز هتمل دون كس
في بعض الأحيان يكون من الضروري تقليل حجم الخط في كود هتمل دون استخدام كس. يمكن أن يكون هذا مفيدا للحالات التي تريد فيها تحقيق تحكم أكثر مرونة في الخط أو تجنب استخدام ملفات الأنماط الخارجية.
يوضح الجدول التالي كيفية تقليل حجم الخط في كود هتمل باستخدام علامات هتمل بدون كس:
| الوسم | الوصف | مثال الاستخدام |
|---|---|---|
| يحدد نص أصغر | نص صغير | |
| يحدد النص في منخفض | إتش 2 أو | |
| يحدد النص في مرتفع | إكس 2 | |
| يحدد نص أصغر | نص صغير |
باستخدام هذه العلامات ، يمكنك التحكم بدقة في حجم ونمط النص في شفرة هتمل الخاصة بك. يمكن أن يكون تقليل حجم الخط دون استخدام كس مفيدا عند الحاجة إلى ضبط الخط ولا تريد تنزيل ملفات نمط إضافية أو استخدام موارد خارجية.
زيادة وتقليل الخط باستخدام خاصية حجم الخط المغلق
بناء الجملة لاستخدام خاصية حجم الخط كما يلي:
محدد {
حجم الخط: القيمة;
هنا ، المحدد هو محدد يحدد العناصر التي سيتم تطبيق تغيير حجم الخط عليها. القيمة هي قيمة حجم الخط ، والتي يمكن تعيينها بالبكسل والنسب المئوية ووحدات القياس الأخرى.
أمثلة الاستخدام:
ص {
حجم الخط: 14 بكسل;
}
ح1 {
حجم الخط: 2 م;
}
سبان {
حجم الخط: 80%;
}
تغيير حجم الخط في العناوين والفقرات
- حجم الخط: 26 بكسل;
- حجم الخط: 14 بكسل;
يحتوي هذا النص على حجم خط 12 بكسل.
- تغيير حجم الخط داخل كتل النص
لتغيير حجم الخط داخل كتل النص ، يمكنك استخدام خاصية كس
- لجعل الخط أصغر ، يمكنك تعيين قيمة أصغر من حجم الخط الحالي. على سبيل المثال,
- إذا كان النص داخل العنصر
سمة النمط
- يمكنك أيضا تغيير حجم الخط لمجموعة معينة من العناصر. يمكنك استخدام الطبقات لهذا:
- تم تعيين الملكية
النص