CSS

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

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

التاريخ

09 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

8061

المواضيع

24
الشروحات chevron_left CSS Font Size chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> 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;
}
لو كانت خطوط الصفحة بوحدة Pixels بكسل فسيتمكن مستخدمي مواقع الويب من إستخدام أداة zoom علي المتصفح لتكبير وتصغير حجم الخطوط.

</> 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 ;
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات