تغيير حجم النص ولونه.

كبّروا جملة افتتاحية، أو لوّنوا اقتباسا بلون علامتكم، أو اجعلوا عنوانا أبيض على صورة داكنة. مع حجم الخط ولون الخط في لوحة النمط، تغيّرون كل النص في عنصر واحد. ولجزء من نص، استخدموا شريط أدوات محرّر النص بدلا من ذلك. وللأحجام والألوان التي تشترك فيها كل صفحة، استخدموا قالبكم.

يتبع الفيديو الوصفة أدناه: فيحوّل جملة واحدة إلى افتتاحية بحجم أكبر ولون علامة.

قبل أن تبدؤوا

• افتحوا الصفحة في DXPR Builder؛ فالإشارة إلى عنصر تعرض شريط التحكم الخاص به مع المزيد. جدد على المنشئ؟ انظروا صفحتكم الأولى.
• حفظ في مربع الحوار يحفظ تغييرا في المحرّر. ويخزّن حفظ في شريط أدوات المنشئ فوق محتواكم الصفحة ويعرض «حُفظ الحقل».
• استخدموا لوحة النمط لعنصر واحد: فقرة افتتاحية أو اقتباس أو عنوان على صورة.
• استخدموا محرّر النص لجزء من نص وللبنية. اجعلوا العنوان عنوانا حقيقيا باستخدام العنوان 2 أو العنوان 3، لا سطر عادي أكبر. فقارئات الشاشة ومحركات البحث تقرأ المستوى لا الحجم.
• استخدموا قائمة أنماط المحرّر لأنماط نصوص العلامة. يضبطها مسؤول موقعكم ضمن الإعدادات العامة > محرّر النص > أنماط مخصصة (/admin/dxpr_studio/dxpr_builder/settings).
• استخدموا قالبكم لخط المتن وأحجام العناوين وألوان الروابط.

وصفة: جملة افتتاحية بلون علامتكم

1. أضيفوا عنصر نص واكتبوا جملة أو جملتين كنص عادي.
2. حوموا عليه، وانقروا المزيد ثم الإعدادات.
3. افتحوا لوحة النمط واسحبوا حجم الخط إلى 20. يكبر النص أثناء السحب.
4. افتحوا لون الخط واختاروا لون علامتكم من العيّنات، أو اكتبوا رمزه، مثل #1a4d8f، في حقل اللون.
5. انقروا حفظ في مربع الحوار. عند 20 بكسل تُعدّ الجملة نصا عاديا، فتحتاج تباين 4.5 إلى 1. أدخلوا رمز لونكم ولون الخلفية في فاحص تباين؛ فالصفحة البيضاء هي #ffffff.
6. انقروا حفظ في شريط الأدوات.

ما ترونه

تكبر الجملة إلى 20 بكسل وتتحول إلى لون علامتكم. وتأخذ العناوين والروابط داخل عنصر النص نفسه ذلك اللون أيضا، لكن العناوين تحتفظ بحجمها.

كيف تعمل الإعدادات

حجم الخط

حجم الخط يمتد من 0 إلى 100 بكسل، ويُبقي الصفر حجم قالبكم. القيمة نفسها على كل حجم شاشة: فسطر 48 بكسل على سطح المكتب هو 48 بكسل على الهاتف أيضا.

يُطبَّق الحجم على العنصر، والنص ذو الحجم الخاص يحتفظ به. والعناوين تفعل ذلك عادة، لأن Bootstrap يحجّمها من الحجم الأساسي للصفحة. والنص الذي حجّمتموه بأداة حجم الخط في المحرّر يحتفظ بحجمه أيضا.

لون الخط

يعرض المنتقي لوحة ألوان قالبكم كعيّنات، عندما يملك موقعكم واحدة. ويحمل أيضا منزلق شفافية وحقلا تكتبون فيه رمز لون، مثل #1a4d8f. يعيد مسح في المنتقي النص إلى لون القالب.

على عنصر محتوى مثل النص أو البطاقة أو التنبيه، يصل اللون إلى كل ما داخله، بما فيه العناوين والروابط. وعلى القسم لا يصل إلا إلى نص بلا لون خاص. والعناوين والروابط التي يلوّنها قالبكم تحتفظ بلونها هناك.

فئات ألوان Bootstrap موسومة بـ !important، فتتغلب على لون الخط. ومنها رقاقة لون نص رئيسي ضمن فئات HTML. ومنها نمط محرّر مثل نص العلامة الرئيسي على جزء من النص.

وعلى الزر، يُطبَّق اللون على الزر نفسه ويحل محل لون تحويم القالب. اضبطوا لون الخط في نمط التحويم أيضا.

التحويم

تحمل لوحة نمط التحويم لون الخط وحجم الخط الخاصين بها. يدفع الحجم الأكبر عند التحويم المحتوى حوله، فتغيير اللون عادة الخيار الأهدأ.

التباين

لنص يقرؤه معظم الناس، تطلب قواعد WCAG 2 عند المستوى AA هذا القدر من التباين:

على صورة، قيسوا مقابل الجزء الأفتح خلف النص. اختبروا زوج لونيكم بفاحص تباين، مثل فاحص تباين WebAIM.

إذا لم يظهر لكم

• العنوان داخل النص لم يكبر. فالعنوان يحمل حجمه الخاص من قالبكم. اختاروا مستوى عنوان آخر في محرّر النص، أو استخدموا أداة حجم الخط فيه.
• تحتفظ الروابط والعناوين بلونها. فعلى القسم، يحتفظ النص ذو لون القالب الخاص به. اضبطوا لون الخط على عنصر النص بدلا من ذلك.
• لون الخط لا يفعل شيئا إطلاقا. فتفوز فئة لون مثل لون نص رئيسي أو نص أبيض ضمن فئات HTML. أزيلوا رقاقتها.
• يحتفظ جزء من النص بلون آخر. فيفوز نمط محرّر على ذلك الجزء، مثل نص العلامة الرئيسي. أزيلوا النمط في محرّر النص.
• حجم الخط لا يفعل شيئا على عدّاد. فالعدّاد الدائري والعدّاد الرقمي يحملان حجم الخط الخاص بهما. استخدموا ذاك.
• لون عيّنة لم يعد يطابق العلامة. فالعيّنة تنسخ اللون عندما تختارونها. بعد تغيير لوحة الألوان، اختاروا العيّنة مجددا.
• لون العلامة يفشل في فحص التباين. اختاروا درجة أغمق منه. أو اجعلوا النص 24 بكسل على الأقل، فينطبق هدف 3 إلى 1.
• النص صعب القراءة على صورة. فالتباين منخفض جدا. أغمقوا الصورة بمتدرج، كما هو معروض في صفحة الخلفيات.
• فقد الزر لون نص التحويم. فـ لون الخط الخاص بكم يحل محل لون تحويم القالب. اضبطوا لون الخط في نمط التحويم أيضا.

ما الخطوة التالية؟

• معرّف HTML والفئات: أعيدوا استخدام نمط نص عبر فئة بدلا من ضبطه على كل عنصر.