الفرق بين المراجعتين ل"CSS/font-size-adjust"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>font-size-adjust</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>font-size-adjust</code>}}</noinclude> | ||
| − | الخاصية <code>font-size-adjust</code> في CSS تقول أنَّ حجم الخط يجب أن يكون مُختارًا اعتمادًا على ارتفاع الأحرف الصغيرة (lowercase) بدلًا من ارتفاع الأحرف الكبيرة؛ وهذا مُفيدٌ لأنَّ وضوح الخطوط وسهولة قراءتها -خصوصًا إذا كان حجمها صغيرًا- سيُحدَّد بحجم الأحرف ذات الحالة الصغيرة وليس الكبيرة. | + | الخاصية <code>font-size-adjust</code> في CSS تقول أنَّ حجم الخط يجب أن يكون مُختارًا اعتمادًا على ارتفاع الأحرف الصغيرة (lowercase) بدلًا من ارتفاع الأحرف الكبيرة؛ وهذا مُفيدٌ لأنَّ وضوح الخطوط وسهولة قراءتها -خصوصًا إذا كان حجمها صغيرًا- سيُحدَّد بحجم الأحرف ذات الحالة الصغيرة وليس الكبيرة. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 29: | سطر 20: | ||
|كما حُدِّدَت. | |كما حُدِّدَت. | ||
|} | |} | ||
| + | |||
| + | <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"> | مثال عن استخدام الخاصية <code>font-size-adjust</code> لعرض الخط بحجمٍ مناسب حتى لو كان صغيرًا:<syntaxhighlight lang="html"> | ||
| − | <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> | ||
| − | <div class="adjtimes"> | + | <div class="adjtimes"> |
| + | 10px Times الخط | ||
| + | Verdana تم تعديله ليكون حجمه مثل الخط | ||
| + | رائع، أليس كذلك؟ | ||
| + | </div> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
| سطر 83: | سطر 97: | ||
تقبل الخاصية <code>font-size-adjust</code> إحدى القيمتين التاليتين. | تقبل الخاصية <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-size|font-size]]</code>. | ||
| سطر 96: | سطر 110: | ||
</syntaxhighlight> | </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> التي تضبط القيمة اللونية للعناصر. | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-fonts-3/#propdef-font-size-adjust CSS Fonts Module Level 3]. | * مواصفة [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. | عُرِّفَت الخاصية <code>font-size-adjust</code> أوّل مرة في CSS 2 ثم حُذِفَت في CSS 2.1، ثم أضيفت مجددًا في CSS 3. | ||
| − | [[تصنيف:CSS]] | + | [[تصنيف:CSS|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Property]] | + | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Font]] | + | [[تصنيف:CSS Font|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 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.