عرض مصدر CSS/font-size-adjust

<noinclude>{{DISPLAYTITLE:الخاصية <code>font-size-adjust</code>}}</noinclude>
الخاصية <code>font-size-adjust</code> في CSS تقول أنَّ حجم الخط يجب أن يكون مُختارًا اعتمادًا على ارتفاع الأحرف الصغيرة (lowercase) بدلًا من ارتفاع الأحرف الكبيرة؛ وهذا مُفيدٌ لأنَّ وضوح الخطوط وسهولة قراءتها -خصوصًا إذا كان حجمها صغيرًا- سيُحدَّد بحجم الأحرف ذات الحالة الصغيرة وليس الكبيرة.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>none</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|نعم
|-
!قابلة للتحريك
|نعم
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.
|}

<syntaxhighlight lang="css">
/* استخدام حجم الخط المُحدَّد */
font-size-adjust: none;

/* استخدام حجم خط سيجعل الأحرف الصغيرة بنصف ارتفاع حجم الخط المُحدَّد */
font-size-adjust: 0.5;

/* القيم العامة */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: unset;
</syntaxhighlight>

== أمثلة ==
مثال عن استخدام الخاصية <code>font-size-adjust</code> لعرض الخط بحجمٍ مناسب حتى لو كان صغيرًا:<syntaxhighlight lang="html">
<p>CSS Examples: font-size-adjust</p>
<br>
<div class="times"> This is the Times font (10px) which is hard to read in small sizes</div>
<p>
<div class="verdana"> This is the Verdana font (10px) which does much better, since it is a sans - serif font.</div>
<br>
<p> Now we 'll do an adjustment:</p>
<p>
<div class="adjtimes"> and the 10px Times, adjusted to the same aspect ratio as the Verdana. Cool, eh?</div>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.times {
    font-family: Times, serif;
    font-size: 10px;
}

.verdana {
    font-family: Verdana, sans-serif;
    font-size: 10px;
}

.adjtimes {
    font-family: Times, sans-serif; 
    font-size-adjust: 0.58;
    font-size: 10px;
}
</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|43.0*
|3.0
|غير مدعومة
|30.0*
|غير مدعومة
|}
<nowiki>*</nowiki> تطبيق هذه الخاصية على متصفحَي Chrome و Opera ما يزال اختباريًا، ويجب تفعيل الراية «Enable experimental Web Platform features» في <code>chrome://flags</code> أو <code>opera://flags</code>.

على النقيض من IE، يدعم متصفح Edge هذه الخاصية.

== البنية العامة ==
تقبل الخاصية <code>font-size-adjust</code> إحدى القيمتين التاليتين.

===  <code>none</code> ===
اختيار حجم الخط اعتمادًا على الخاصية <code>[[CSS/font-size|font-size]]</code> فقط.

===  <code>[[CSS/number|<number>]]</code> ===
اختيار حجم الخط كي يكون ارتفاع المحارف الصغيرة (التي تُحدَّد بارتفاع x-height للخط المستخدم) مساويًا لناتج ضرب هذه القيمة بقيمة الخاصية <code>[[CSS/font-size|font-size]]</code>.

يجب أن تكون هذه القيمة عادةً هي نسبة ارتفاع x-height إلى حجم أوّل خط مستخدم في الخاصية <code>[[CSS/font-family|font-family]]</code>، وهذا يعني أنَّ أوّل خط سيكون بنفس الحجم على جميع المتصفحات، سواءً كانت تدعم الخاصية <code>font-size-adjust</code> أم لا.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
font-size-adjust: none | <number>;

</syntaxhighlight>

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-fonts-3/#propdef-font-size-adjust CSS Fonts Module Level 3].
عُرِّفَت الخاصية <code>font-size-adjust</code> أوّل مرة في CSS 2 ثم حُذِفَت في CSS 2.1، ثم أضيفت مجددًا في CSS 3.
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Font|{{SUBPAGENAME}}]]