يعد اختيار حجم الخط الصحيح أحد المكونات المهمة لأي تصميم. يمكن أن يؤدي المزيج الصحيح من حجم الخط وأسلوبه إلى جعل النص أكثر جاذبية وسهولة في القراءة. إذا كنت قد بدأت للتو في تصميم الويب أو تريد معرفة كيفية التحكم في حجم الخط ، فسيساعدك هذا الدليل البسيط في معرفة هذا الموضوع.
وحدات القياس
قبل البدء في تجربة حجم الخط ، من المهم فهم وحدات القياس المختلفة المستخدمة لتعيين حجم النص. مصممي الويب عادة ما تستخدم وحدات مثل بكسل (بكسل) ، م (م) والنسب المئوية ( ٪ ). كل واحد منهم له خصائصه وتطبيقاته الخاصة ، لذلك يوصى بفهم اختلافاتهم قبل البدء في تغيير حجم الخط.
"بكسل (بكسل) هي الوحدة الأكثر شيوعا لتحديد حجم النص. إنها قيمة مطلقة لا تعتمد على عوامل أخرى. غالبا ما تستخدم وحدات البكسل لتعيين حجم الخط الدقيق."
تغيير حجم الخط
هناك عدة طرق لتغيير حجم الخط في تصميم الويب. واحدة من أسهل الطرق هي استخدام خاصية حجم الخط المغلق. مثال على ذلك هو الكود التالي:
في هذه الحالة ، سيكون حجم الخط داخل علامة الجسم 16 بكسل. يمكن أيضا تعيين هذه القيمة في وحدات قياس أخرى ، مثل البوصة أو النسب المئوية. يمكنك أيضا تغيير حجم الخط لعنصر معين باستخدام فئته أو معرفه.:
. عنصري {
حجم الخط: 20 بكسل;
}
الآن سيكون للخط داخل العنصر مع فئة "العنصر الخاص بي" حجم 20 بكسل.
- كيف يمكنني تغيير حجم النص على صفحة ويب?
- تغيير حجم النص باستخدام كس
- استخدام سمة" النمط " لتغيير حجم الخط
كيف يمكنني تغيير حجم النص على صفحة ويب?
، لتعيين حجم الخط بالبكسل.
نموذج التعليمات البرمجية:
- الصق سطر التعليمات البرمجية التالي لتغيير حجم الخط بمقدار 16 بكسل:
- 20 بكسل
- لحجم أكبر.
يمكنك أيضا تطبيق حجم الخط على عنصر معين عن طريق إضافة فئته أو معرفه إلى قاعدة كس. على سبيل المثال ، إذا كان لديك عنصر مع فئة "النص الخاص بي" ، يمكنك استخدام السطر التالي من التعليمات البرمجية:
مثال على نص مع تغيير حجم الخط.
بناء الجملة بسيط ومباشر:
أين
.محدد
- هو محدد يشير إلى العنصر (العناصر) الذي تريد تغيير حجم النص من أجله. بدلا من ذلك
- .رأس {
- .المحتوى {
باستخدام بكسل:
باستخدام النسب المئوية:
باستخدام م:
}
على الرغم من أن هناك العديد من الخيارات لتغيير حجم النص في كس ، وذلك باستخدام الخاصية
حجم الخط
هي الطريقة الأكثر شيوعا والأسهل. يمكن تطبيقه على عناصر مختلفة مثل العناوين والفقرات والقوائم وغيرها.
تغيير حجم النص في كس يسمح لك لخلق مجموعة متنوعة من التصاميم ويوفر المرونة في تخصيص مظهر موقع الويب الخاص بك أو التطبيق.
استخدام سمة" النمط " لتغيير حجم الخط
في هذا المثال ، تشير سمة "النمط" إلى أن العنصر