تغييرات حجم الخط العام
أبسط طريقة لتغيير حجم الخط لمجتمعك بأكمله هي تجاوز القيمة الافتراضية على عنصر HTML في ملف CSS الخاص بالسمة (theme) لديك، كما يلي:
html {
font-size: 17px; /* الافتراضي هو 16px */
}
نظرًا لأن جميع قيم font-size الخاصة بنا داخل <HTML> مُعرَّفة بوحدات em، فإن زيادة font-size على <HTML> ستزيد بشكل متناسب من حجم الخط لجميع العناصر الأخرى (em هي وحدات نسبية).
يأتي Discourse أيضًا مع خيارات حجم نص يمكن للمستخدم تحديدها ويمكن تغييرها في تفضيلات كل مستخدم (/my/preferences/interface)، وهي افتراضيًا:
Smallest: 13px
Smaller: 14px
Normal: 16px (default)
Larger: 18px
Largest: 20px
عندما تقوم بتغيير font-size الخاص بـ <html> كما هو موضح أعلاه، فإنك تقوم فقط بتغيير القيمة Normal. لذلك، إذا كنت تريد أن تستمر إعدادات حجم نص المستخدم في العمل في السمة الخاصة بك، فيجب عليك أيضًا زيادة font-size للخيارات الأخرى. إذا كنت ترغب في زيادة حجم الخط لجميع الخيارات بمقدار 1 بكسل، فسيبدو الأمر كما يلي:
:root {
--base-font-size-smallest: 14px;
--base-font-size-smaller: 15px;
--base-font-size: 17px;
--base-font-size-larger: 19px;
--base-font-size-largest: 21px;
}
تغيير حجم الخط للمكونات الفردية
قد لا ترغب في زيادة حجم الخط العام لمجتمعك، ولكنك تريد فقط تغيير font-size لمكون معين، مثل الرأس (header) أو المشاركات (posts). إذا كنت معتادًا على CSS، يمكنك استهداف العناصر الفردية كما هو متوقع.
على سبيل المثال، لزيادة حجم الخط لكل المحتوى الموجود داخل مشاركة يمكنك القيام بما يلي:
.topic-post {
font-size: 1.2em;
}
إذا كنت تريد تغيير حجم نص محتوى المشاركة، ولكن ليس أسماء المستخدمين والبيانات الوصفية الأخرى، فأنت بحاجة إلى أن تكون أكثر تحديدًا (انقر بزر الماوس الأيمن على عنصر واستخدم أداة الفحص (inspector) في متصفحك إذا احتجت إلى معرفة العنصر الذي يجب استهدافه)…
.topic-post .contents {
font-size: 1.2em;
}
لاحظ أنني أستخدم وحدات em في الأمثلة أعلاه. يمكنك استخدام قيم px هنا، ولكن فائدة ems هي أنها نسبية.
إذا استخدمت وحدات البكسل في الأمثلة أعلاه، فستظل أحجام الخط هذه كما هي حتى لو قام المستخدم بتغيير حجم النص في إعداداته. القيمة الثابتة مثل 16px هي دائمًا 16px. ولكن عند استخدام قيمة مثل 1.2em، فإنها تعمل كعامل مضاعف… لذلك إذا اختار شخص ما حجم نص أكبر في إعداداته، فسوف يتوسع حجم الخط دائمًا ليصبح أكبر بـ 1.2 مرة من الإعداد الأساسي.
الاستفادة من متغيرات تغيير حجم الخط في Discourse
في الأنماط الافتراضية لـ Discourse، نعتمد على مجموعة من متغيرات تغيير حجم الخط. يمكنك أيضًا استخدام هذه المتغيرات في السمات الخاصة بك:
:root {
--font-up-6: 2.296em;
--font-up-5: 2em;
--font-up-4: 1.7511em;
--font-up-3: 1.5157em;
--font-up-2: 1.3195em;
--font-up-1: 1.1487em;
--font-0: 1em;
--font-down-1: 0.8706em;
--font-down-2: 0.7579em;
--font-down-3: 0.6599em;
--font-down-4: 0.5745em;
--font-down-5: 0.5em;
--font-down-6: 0.4355em;
}
يضمن هذا النظام أننا نستخدم مجموعة محدودة من أحجام الخطوط التي تتوسع بناءً على الحجم العام المحدد على html (ويوفر عليك إجراء عمليات حسابية عند تداخل وحدات em). إذا تم تعيين عنصر على font-size: var(--font-up-3)، فنحن نعلم أنه سيكون أكبر 1.5 مرة من --font-0، بغض النظر عن قيمة البكسل المحددة.
إذا شعرت بالضياع بعض الشيء، فقد يساعدك تصور هذه المتغيرات كأنها سلم. إذا كان لديك عنصر بحجم خط font-size: var(--font-up-3) واحتجت إلى أن يكون العنصر الابن لهذا العنصر مكافئًا لـ --font-0، فستحتاج إلى النزول 3 خطوات على السلم للوصول إلى هناك (لذا ستستخدم --font-down-3).
إليك كيف يعمل هذا:
.topic-post {
font-size: var(--font-up-3); // 3 خطوات للأعلى
.topic-meta-data {
font-size: var(
--font-down-3
); // 3 خطوات للأسفل؛ مكافئ لـ --font-0 (1em)
}
}
يتم التحكم في إصدار هذه الوثيقة - اقترح التغييرات على github.