5.6 KiB
| title | localeTitle |
|---|---|
| Font Size Property | حجم الخط الممتلكات |
حجم الخط الممتلكات
التعريف والاستخدام
يتم استخدام الخاصية 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; }
نتيجة: 
٪
يمكنك استخدام وحدة نسبة٪ لضبط حجم الخط النسبي لحجم الخط عنصر الجسم. الإعداد الافتراضي هو 16 بكسل ، لذا فإن النسبة 100٪ تساوي 16 بكسل. إذا تم تغيير حجم الخط الخاص بالجسم ، فسيتم أيضًا تغيير حجم خط أي عناصر موجودة داخل الجسم والتي تحتوي على قيمة كنسبة مئوية. تتيح هذه الوحدة تحجيم الخط على أحجام مختلفة للشاشة.
مثال:
p { font-size: 120%; }
نتيجة: 
يغيّر الرمز أعلاه حجم الخط إلى 120٪ من حجم الخط الافتراضي وهو 16 بكسل.
م
وحدة أخرى يمكن استخدامها لحجم الخط هي وحدة em . وحدة em واحدة تساوي حجم الخط الافتراضي لأقرب عنصر أصل. هذا يعني أن 2em سيكون ضعف حجم الخط و 4 em سيكون 4 أضعاف حجم الخط. أصبحت وحدة em أكثر شيوعًا نظرًا لتوسيع نطاقها وجعلها مناسبة للجوّال.
مثال:
p { font-size: 1.4em; }
نتيجة: 
يعيّن الرمز أعلاه حجم الخط في الفقرة إلى 1.4 مرة حجم الخط من أقرب أصل وهو العنصر الأساسي. يحتوي عنصر النص على حجم خط افتراضي يبلغ 16 بكسل ، لذا سيكون لهذه الفقرة حجم خط يبلغ 1.4 * 16 = 22.4 بكسل.
عيني
تشبه وحدة rem إلى حد كبير وحدة em ولكن حجم الخط يتعلق بحجم الخط الافتراضي لعنصر الجذر. العنصر الجذر هو عنصر <html> .
مثال:
html { font-size: 12px; } p { font-size: 1.4rem; }
نتيجة: 
تحتوي الفقرة أعلاه على حجم خط 1.4 إم. في هذه المرة ، تم تغيير حجم خط العنصر الجذري إلى 12 بكسل ، لذلك أصبح خط الفقرة الآن 12 * 1.4 = 16.8px. لا تعتبر وحدة ريم خط عنصر العنصر على الرغم من حقيقة أنه لا يزال 16px.
حزب العمال
الوحدة النهائية لأحجام الخطوط هي قيمة النقطة ( نقطة ). هذه القيمة نسبة إلى أحجام النص الحقيقي. نقطة واحدة تساوي 1/72 بوصة على الورق ، بحيث يكون 72pt يساوي 1 بوصة. قيم النقاط دقيقة على الورق ولكنها قد تبدو مختلفة على المتصفحات المختلفة. هذه الوحدة مفيدة فقط عندما تحتاج إلى طباعة صفحات ذات حجم خط دقيق. وحدة pt غير قابلة للتحجيم.
مثال:
p { font-size: 16pt; }
نتيجة: 
حجم الخط أعلاه هو 16 نقطة.
لقد أرفقت بعض روابط المقالات أدناه إذا كنت ترغب في قراءة المزيد حول هذا الموضوع.