انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 20
دورة لغة CSS

تغيير حجم الخطوط في لغة CSSCSS Font Size

ستتعلم في هذا الدرس تغيير حجم الخطوط أي نوع من أونواع الخطوط للنصوص بلغة CSS وهذة الخطوط تكون بداخل أي عنصر من عناصر HTML.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
8
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
13,737
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

CSS Font Size تغيير حجم الخطوط في لغة CSS

تتحكم خاصية font-size في حجم الخط. بعض وحدات الطول مطلقة مثل px، وبعضها نسبي إلى حجم خط أو إلى مساحة العرض. لا تمنع وحدة البكسل تكبير الصفحة بأداة المتصفح، كما أن استخدام وحدة نسبية لا يجعل التصميم متجاوبًا تلقائيًا مع كل جهاز.

  • px: بكسل CSS.
  • em داخل font-size: نسبة إلى حجم خط العنصر الأب.
  • rem: نسبة إلى حجم خط العنصر الجذر html.
  • vw: نسبة إلى عرض مساحة العرض viewport.
  • %: نسبة إلى حجم خط الأب؛ ليست قيمة ثابتة تساوي 16px.
تغيير حجم الخطوط في لغة CSS

font size syntax

طريقة كتابة font size في لغة CSS.

CSS 
font-size:value;

CSS font size with Pixels التحكم في حجم الخطوط بوحدة Pixels في لغة CSS

تُكتب القيم بداخل خاصية font-size بوحدة pixels البيكسل في لغة CSS للتحكم في حجم النصوص.

CSS font size with Pixels

تكتب القيمة متبوعة بوحدة px، مثل 18px. تقبل الكسور أيضًا، مثل 18.5px، وليست مقصورة على الأعداد الصحيحة.

HTML 
h1
{
  font-size: 40px;
}
جرّب بنفسك

CSS font size with percentage التحكم في حجم الخطوط بوحدة percentage في لغة CSS

تحدد النسبة المئوية في font-size حجم الخط بالنسبة إلى حجم خط الأب. تعني 100% الحجم نفسه؛ وتساوي 16px فقط إذا كان حجم خط الأب 16px.

CSS font size with percentage

القيمة 100% تجعل حجم خط العنصر مساويًا لحجم خط أبيه، وهو ما يوضحه المثال.

HTML 
h1,h2,h3,p
{
  font-size: 100%;
}
جرّب بنفسك

CSS font size with 50 percentage

القيمة 50% تجعل حجم الخط نصف حجم خط الأب. إذا كان الأب بحجم 16px فستكون النتيجة 8px؛ وتتغير النتيجة عندما يتغير حجم الأب.

HTML 
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 هو معامل ضرب حجم خط الأب: 1em يساويه، و2em يضاعفه، و0.5em يعطي نصفه. الوحدة وحدها لا تعني الضعف دائمًا.

HTML 
html 
{ 
  font-size: 100% /* 16px if the default root size is 16px */
}

body 
{
  font-size: 1em; /* 16px if the default root size is 16px */
}

h1
 {
  font-size: 3em; /* 48px if the root size is 16px */
}

p 
{
  font-size: 2em; /* 32px if the root size is 16px */
}
جرّب بنفسك

CSS font size with rem التحكم في حجم الخطوط بوحدة rem في لغة CSS

تحدد وحدة rem الحجم نسبة إلى خط العنصر الجذر html، وليس نسبة إلى الأب المباشر لكل عنصر. إذا كان حجم خط الجذر 16px، فالقيمة 2rem تعطي 32px. يستخدم المثال التالي 2rem على body؛ وقد تكبر العناوين عنه بسبب أنماط المتصفح الافتراضية.

CSS font size with rem

HTML 
html 
{ 
  font-size: 100% /* 16px if the default root size is 16px */
}

body 
{
  font-size: 2rem; /* 32px if the root size is 16px */
}
جرّب بنفسك

CSS font size with vw التحكم في حجم الخطوط بوحدة vw في لغة CSS

تساوي 1vw واحدًا من مئة من عرض مساحة العرض viewport. لذلك يتغير حجم الخط عند تغيير عرض نافذة العرض، لا بمجرد اختلاف اسم الجهاز. داخل تجربة مضمنة يكون المرجع مساحة عرض إطار النتيجة نفسه.

CSS font size with vw

يعرض المثال الفقرات بحجم 2vw، أي 2% من عرض مساحة العرض الخاصة بالنتيجة.

HTML 
p 
{
  font-size: 2vw ;
}
جرّب بنفسك

CSS font size with kewords التحكم في حجم الخطوط بكلمات دلالية في لغة CSS

يمكن تحديد حجم الخط بكلمات دلالية دون كتابة وحدة. القيم xx-small وx-small وsmall وmedium وlarge وx-large وxx-large وxxx-large تسمى أحجامًا مطلقة، ويحدد المتصفح أحجامها انطلاقًا من الحجم الافتراضي للمستخدم. أما smaller وlarger فهما نسبيتان إلى حجم خط الأب.

CSS font size with kewords

يتغير الحجم علي حسب الكلمة الدلالية.

HTML 
h1
{
 font-size: large;
}

p 
{
 font-size: small ;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات17

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 17 مفهومةأول بطاقة، أول خطوة
01 Size حجم
للمراجعة
02 Font الخط
للمراجعة
03 Property خاصية
للمراجعة
04 Elements عناصر
للمراجعة
05 Value قيمة
للمراجعة
06 Parent الأب
للمراجعة
07 Em وحدة قياس Em
للمراجعة
08 Rem وحدة قياس Rem
للمراجعة
09 Body جسم المحتوي
للمراجعة
10 Kewords كلمات
للمراجعة
11 Xx-small صغير جداً جداً
للمراجعة
12 X-small صغير جداً
للمراجعة
13 Small صغير
للمراجعة
14 Medium وسط
للمراجعة
15 Large كبير
للمراجعة
16 X-large كبير جداً
للمراجعة
17 Xx-large كبير جداً جداً
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 Px Px
Pixel
وحدة قياس الPixel
للمراجعة
02 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
03 HTML HTML
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
للمراجعة
04 Vw Vw
Veiwport
شكل العرض / منفذ العرض
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

3أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي3 أسئلة تنتظرك
01

ماهي الخاصية التي تستخدم في تحديد حجم الخط ؟

____
02

ماهي نسبة ال px الي rem ؟

03

أي من الاختيارات الاتية ليست وحدة قياس تستخدم في تحديد حجم الخط ؟