93 lines
5.6 KiB
Markdown
93 lines
5.6 KiB
Markdown
|
---
|
|||
|
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/
|