---
title: Font Size Property
localeTitle: حجم الخط الممتلكات
---
## حجم الخط الممتلكات

### التعريف والاستخدام

يتم استخدام الخاصية `font-size` لتعيين حجم خط العنصر. يوجد أدناه بناء الجملة الافتراضي لهذه الخاصية.

 `font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit; 
` 

كما هو موضح أعلاه ، يمكن أن تأخذ هذه الخاصية عدة قيم. القيمة الافتراضية هي _متوسطة الحجم_ والقيم من _xx-small_ إلى _xx-large_ تحدد حجم الخط من صغير جدًا إلى كبير جدًا (مثل أحجام الملابس). تحدد القيم _الأصغر_ _والأكبر_ حجم الخط إلى أصغر من حجم خط العنصر الأصلي وأكبر من حجم خط العنصر الأصلي ، على التوالي. على الرغم من توافر القيم المذكورة ، فإن أكثر أنواع القيم المستخدمة شيوعًا هو وحدة الطول. قد تتضمن وحدات الطول: **px** و **٪** و **em** و **rem** و **pt** .

### أطوال وحدات شرح

#### بكسل

يمكنك استخدام \* _px_ unit لتعيين حجم خط ثابت لعنصر بالبكسل. بكسل واحد هو نقطة واحدة على شاشة المستخدم. بما أن وحدات البكسل توفر حجم خط ثابت ، لا يمكن أن يكون حجم الخط مستجيبًا. هذا أمر سلبي لأن أحجام الخطوط قد لا تظهر بشكل جيد على أبعاد شاشة مختلفة وسيتوجب عليك استخدام استعلامات الوسائط لجعل مقياس الخط.

**مثال:**

 `p { 
  font-size: 20px; 
 } 
` 

**نتيجة:** ![مثال واحد](https://image.prntscr.com/image/TI_29z3FRO20dJD2Dc7JJA.png)

#### ٪

يمكنك استخدام وحدة **نسبة٪** لضبط حجم الخط النسبي لحجم الخط عنصر الجسم. الإعداد الافتراضي هو 16 بكسل ، لذا فإن النسبة 100٪ تساوي 16 بكسل. إذا تم تغيير حجم الخط الخاص بالجسم ، فسيتم أيضًا تغيير حجم خط أي عناصر موجودة داخل الجسم والتي تحتوي على قيمة كنسبة مئوية. تتيح هذه الوحدة تحجيم الخط على أحجام مختلفة للشاشة.

**مثال:**

 `p { 
  font-size: 120%; 
 } 
` 

**نتيجة:** ![المثال الثاني](https://image.prntscr.com/image/P9HTpWbETeyjZhxzf9z-SA.png) يغيّر الرمز أعلاه حجم الخط إلى 120٪ من حجم الخط الافتراضي وهو 16 بكسل.

#### م

وحدة أخرى يمكن استخدامها لحجم الخط هي وحدة **em** . وحدة **em** واحدة تساوي حجم الخط الافتراضي لأقرب عنصر أصل. هذا يعني أن 2em سيكون ضعف حجم الخط و 4 em سيكون 4 أضعاف حجم الخط. أصبحت وحدة **em** أكثر شيوعًا نظرًا لتوسيع نطاقها وجعلها مناسبة للجوّال.

**مثال:**

 `p { 
  font-size: 1.4em; 
 } 
` 

**نتيجة:** ![المثال الثالث](https://image.prntscr.com/image/AeCJ0TCbRHqOTAFJ9CYNUQ.png) يعيّن الرمز أعلاه حجم الخط في الفقرة إلى 1.4 مرة حجم الخط من أقرب أصل وهو العنصر الأساسي. يحتوي عنصر النص على حجم خط افتراضي يبلغ 16 بكسل ، لذا سيكون لهذه الفقرة حجم خط يبلغ 1.4 \* 16 = 22.4 بكسل.

#### عيني

تشبه وحدة **rem** إلى حد كبير وحدة **em** ولكن حجم الخط يتعلق بحجم الخط الافتراضي لعنصر الجذر. العنصر الجذر هو عنصر `<html>` .

**مثال:**

 `html { 
    font-size: 12px; 
 } 
 p { 
    font-size: 1.4rem; 
 } 
` 

**نتيجة:** ![المثال الرابع](https://image.prntscr.com/image/V5bn69UmSPOHSVM5YSAcyw.png) تحتوي الفقرة أعلاه على حجم خط 1.4 إم. في هذه المرة ، تم تغيير حجم خط العنصر الجذري إلى 12 بكسل ، لذلك أصبح خط الفقرة الآن 12 \* 1.4 = 16.8px. لا تعتبر وحدة **ريم** خط عنصر العنصر على الرغم من حقيقة أنه لا يزال 16px.

#### حزب العمال

الوحدة النهائية لأحجام الخطوط هي قيمة النقطة ( **نقطة** ). هذه القيمة نسبة إلى أحجام النص الحقيقي. **نقطة** واحدة تساوي 1/72 بوصة على الورق ، بحيث يكون 72pt يساوي 1 بوصة. قيم النقاط دقيقة على الورق ولكنها قد تبدو مختلفة على المتصفحات المختلفة. هذه الوحدة مفيدة فقط عندما تحتاج إلى طباعة صفحات ذات حجم خط دقيق. وحدة **pt** غير قابلة للتحجيم.

**مثال:**

 `p { 
  font-size: 16pt; 
 } 
` 

**نتيجة:** ![المثال الخامس](https://image.prntscr.com/image/IyOOr_WCT963wa0DoWyoOg.png) حجم الخط أعلاه هو 16 نقطة.

لقد أرفقت بعض روابط المقالات أدناه إذا كنت ترغب في قراءة المزيد حول هذا الموضوع.

#### معلومات اكثر:

*   https://css-tricks.com/css-font-size/
*   https://www.w3schools.com/cssref/pr _font_ font-size.asp
*   https://css-tricks.com/confused-rem-em/
*   https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/