CSS Font Size
تغيير حجم الخطوط في لغة CSS
ستتعلم في هذا الدرس تغيير حجم الخطوط أي نوع من أونواع الخطوط للنصوص بلغة CSS وهذة الخطوط تكون بداخل أي عنصر من عناصر HTML.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Font Size
تغيير حجم الخطوط في لغة CSS
</>
CSS Font Size
تغيير حجم الخطوط في لغة CSS
عن طريق خاصية font-size يمكن التحكم في حجم خطوط النصوص وتغيير الخطوط الافتراضية إلي خطوط مناسبة لتصميم صفحات الويب.
هناك نوعين من أحجام الخطوط في لغة CS:
- absolute size وهو إضافة أحجام للنوص ثابتة لا تتغير مع تغير أنواع الأجهزة ولا تسمح للمستخدمين بتكبير الخطوط مع تكبير صفحات الويب zoom.
- relative size وهو إضافة أحجام للنوص ديناميكية تتغير مع أحجام الأجهزة المختلفة وتمكن المستخخدمين من تكبير الخطوط مع تكبير صفحات الويب zoom.
تُكتب القيم بداخل خاصية font-size بوحدات مُختلفة:
- px بوحدة بيكسل.
- em أحجام يشتق من حجم العنصر الأب parent.
- rem أحجام يشتق من حجم العنصر html وهو root element.
- vw وهي أحجام تتناسب وتتغير مع أجهزة مختلفة.
- % وهي حجم الخط الأفتراضي 16 بكسل.
font size syntax
طريقة كتابة font size في لغة CSS.
font-size:value;
تعد القدرة على إدارة حجم النص أمرًا مهمًا في تصميم الويب. ومع ذلك، لا يجب إستخدام عناصر لتكبير حجم الخط لجعل الفقرات تبدو كعناوين، أو تبدو العناوين مثل الفقرات ,دائماً استخدم h1 الي h6 لعمل عناوين والفقرات النصية استخدم عنصر p.
</>
CSS font size with Pixels
التحكم في حجم الخطوط بوحدة Pixels في لغة CSS
تُكتب القيم بداخل خاصية font-size بوحدة pixels البيكسل في لغة CSS للتحكم في حجم النصوص.
CSS font size with Pixels
تُكتب القيمة أرقام صحية متبوعة بأختصار بيكسل وهو px.
h1
{
font-size: 40px;
}
</>
CSS font size with percentage
التحكم في حجم الخطوط بوحدة percentage في لغة CSS
تُكتب القيم بداخل خاصية font-size بوحدة percentage النسب المئوية في لغة CSS للتحكم في حجم النصوص حيث إن قيمة 100% تساوي 16 بكسل.
CSS font size with percentage
تُكتب القيمة أرقام صحية متبوعة بأختصار percentage وهو %100 وتكون بحجم الخط الأفتراضي وهو 16 بيكسل.
h1,h2,h3,p
{
font-size: 100%;
}
CSS font size with 50 percentage
تُكتب القيمة أرقام صحية متبوعة بأختصار percentage وهو %50 وتكون نصف الحجم الخط الأفتراضي وهو 8 بيكسل.
h1,h2,h3,p
{
font-size: 50%;
}
</>
CSS font size with em
التحكم في حجم الخطوط بوحدة em في لغة CSS
تستخدم وحدة القياس em لضبط حجم خط العنصر كأضعاف خط حجم عنصر الأب Eelemtn parent فإذا كان حجم body هو 16 بكسل فأن حجم عنصر h1 الزي يتفرع من body بوحدة بكسل هو 32 إذا كان حجمة 2em أي انه 2x16 ضعفين حجم body.
CSS font size with em
em حجم ضعف عنصر الأب.
html
{
font-size: 100% /* =16px */
}
body
{
font-size: 1em; /* =16px */
}
h1
{
font-size: 3em; /* =48px */
}
p
{
font-size: 2em; /* =32px */
}
</>
CSS font size with rem
التحكم في حجم الخطوط بوحدة rem في لغة CSS
تستخدم وحدة القياس rem لضبط حجم خط العنصر كأضعاف خط حجم عنصر الأب root Element وهو عنصر <html> فإذا كان حجم <html> هو 16 بكسل فأن حجم عنصر <body> الزي يتفرع من <html> بوحدة بكسل هو 32 إذا كان حجمة 2em أي انه 2x16 ضعفين حجم <html>.
CSS font size with rem
html
{
font-size: 100% /* =16px */
}
body
{
font-size: 2em; /* =32px */
}
</>
CSS font size with vw
التحكم في حجم الخطوط بوحدة vw في لغة CSS
وحدة القياس vw هي من النوع ال Relative وهي تساوي = 1/100th من عرض ال viewport حجم شاشة المستخدم وهي وحدة قياس ديناميكيه يتغير حجم الخط مع تغير حجم أنواع الأجهزة ويكون متجاوب علي حسب حجم الشاشة.
CSS font size with vw
حجم خط ديناميكي متغير علي حسب نوع الجهاز.
p
{
font-size: 2vw ;
}
</>
CSS font size with kewords
التحكم في حجم الخطوط بكلمات دلالية في لغة CSS
يمكنك إستخدام keywords كلمات دلالية في لغة CSS مع خاصية font-size لتكبير وتصغير حجم الخطوط دون الحاجه إلي إستخدام أي وحدات بكلمات مجهزة بلغة CSS وهي من النوع Relative وهذة الكلمات هي:
[ xx-small - x-small - small - medium - large - x-large - xx-large ].
CSS font size with kewords
يتغير الحجم علي حسب الكلمة الدلالية.
h1
{
font-size: large;
}
p
{
font-size: small ;
}
حجم
الخط
خاصية
عناصر
قيمة
الأب
وحدة قياس Em
وحدة قياس Rem
جسم المحتوي
كلمات
صغير جداً جداً
صغير جداً
صغير
وسط
كبير
كبير جداً
كبير جداً جداً
Pixel
وحدة قياس الPixelCascading Style Sheets
صفحات الأنماط الانسيابيةVeiwport
شكل العرض / منفذ العرض
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
