الفرق بين المراجعتين لصفحة: «CSS/font-size-adjust»

مراجعة 07:08، 26 يوليو 2018

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

بطاقة الخاصية

القيمة الابتدائية	`none`
تُطبَّق على	جميع العناصر.
قابلة للوراثة	نعم
قابلة للتحريك	نعم
القيمة المحسوبة	كما حُدِّدَت.

/* استخدام حجم الخط المُحدَّد */
font-size-adjust: none;

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

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

أمثلة

مثال عن استخدام الخاصية font-size-adjust لعرض الخط بحجمٍ مناسب حتى لو كان صغيرًا:

<p>مثال عن: font-size-adjust</p>
<br>
<div class="times">هذا الخط هو Times (10px) والذي يصعب قراءته في الحجم الصغير</div>
<p>
<div class="verdana"> هذا الخط هو Verdana (10px) sans - serif font والذي يعتبر أوضح بكثير, لأنه خط .</div>
<br>
<p> الآن سنقوم بإجراء التعديل:</p>
<p>
<div class="adjtimes">  10px Times, adjusted to the same aspect ratio as the Verdana. Cool, eh?</div>

شيفرة 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;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	43.0*	3.0	غير مدعومة	30.0*	غير مدعومة

* تطبيق هذه الخاصية على متصفحَي Chrome و Opera ما يزال اختباريًا، ويجب تفعيل الراية «Enable experimental Web Platform features» في chrome://flags أو opera://flags.

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

البنية العامة

تقبل الخاصية font-size-adjust إحدى القيمتين التاليتين.

`none`

اختيار حجم الخط اعتمادًا على الخاصية font-size فقط.

`<number>`

اختيار حجم الخط كي يكون ارتفاع المحارف الصغيرة (التي تُحدَّد بارتفاع x-height للخط المستخدم) مساويًا لناتج ضرب هذه القيمة بقيمة الخاصية font-size.

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

البنية الرسمية

font-size-adjust: none | <number>;

انظر أيضًا

صفحة الخاصية font التي تؤدي إلى ضبط قيم الخاصيات الفرعية font-style و font-weight و font-size و line-height.
صفحة الخاصية color التي تضبط القيمة اللونية للعناصر.

مصادر ومواصفات

مواصفة CSS Fonts Module Level 3.

عُرِّفَت الخاصية font-size-adjust أوّل مرة في CSS 2 ثم حُذِفَت في CSS 2.1، ثم أضيفت مجددًا في CSS 3.

@@ سطر 36: / سطر 36: @@
 == أمثلة ==
 مثال عن استخدام الخاصية <code>font-size-adjust</code> لعرض الخط بحجمٍ مناسب حتى لو كان صغيرًا:<syntaxhighlight lang="html">
-<p>CSS Examples: font-size-adjust</p>
+<p>مثال عن: font-size-adjust</p>
 <br>
-<div class="times"> This is the Times font (10px) which is hard to read in small sizes</div>
+<div class="times">هذا الخط هو Times (10px) والذي يصعب قراءته في الحجم الصغير</div>
 <p>
-<div class="verdana"> This is the Verdana font (10px) which does much better, since it is a sans - serif font.</div>
+<div class="verdana"> هذا الخط هو Verdana (10px) sans - serif font والذي يعتبر أوضح بكثير, لأنه خط .</div>
 <br>
-<p> Now we 'll do an adjustment:</p>
+<p> الآن سنقوم بإجراء التعديل:</p>
 <p>
-<div class="adjtimes"> and the 10px Times, adjusted to the same aspect ratio as the Verdana. Cool, eh?</div>
+<div class="adjtimes">  10px Times, adjusted to the same aspect ratio as the Verdana. Cool, eh?</div>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
@@ سطر 100: / سطر 100: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة الخاصية <code>[[CSS/font|font]]</code> التي تؤدي إلى ضبط قيم الخاصيات الفرعية <code>[[CSS/font-style|font-style]]</code> و <code>[[CSS/font-weight|font-weight]]</code> و <code>[[CSS/font-size|font-size]]</code> و <code>[[CSS/line-height|line-height]]</code>.
+* صفحة الخاصية <code>[[CSS/color|color]]</code> التي تضبط القيمة اللونية للعناصر.
 == مصادر ومواصفات ==