الفرق بين المراجعتين لصفحة: «CSS/font-size-adjust»
لا ملخص تعديل |
لا ملخص تعديل |
||
سطر 38: | سطر 38: | ||
<p>مثال عن: font-size-adjust</p> | <p>مثال عن: font-size-adjust</p> | ||
<br> | <br> | ||
<div class="times"> | <div class="times"> | ||
Times (10px) هذا الخط هو | |||
والذي يصعب قراءته في الحجم الصغير | |||
</div> | |||
<p> | <p> | ||
<div class="verdana"> | <div class="verdana"> | ||
Verdana (10px) هذا هو الخط | |||
sans - serif font والذي يعتبر أوضح بكثير، لأنه خط | |||
</div> | |||
<br> | <br> | ||
<p> الآن سنقوم بإجراء التعديل:</p> | <p> الآن سنقوم بإجراء التعديل:</p> | ||
<p> | <p> | ||
<div class="adjtimes"> 10px Times | <div class="adjtimes"> | ||
10px Times الخط | |||
Verdana تم تعديله ليكون حجمه مثل الخط | |||
رائع، أليس كذلك؟ | |||
</div> | |||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> |
المراجعة الحالية بتاريخ 07:14، 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 الخط
Verdana تم تعديله ليكون حجمه مثل الخط
رائع، أليس كذلك؟
</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.