--- 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 { 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/