تغيير الخط الافتراضي على موقعك

[Discourse]

يشرح هذا الدليل كيفية تغيير الخط الافتراضي على موقع Discourse الخاص بك، إما لعناصر محددة أو باستخدام مكتبة خطوط أخرى غير Google Fonts.

مستوى المستخدم المطلوب: مسؤول

هذا الدليل مطلوب فقط إذا كنت ترغب في التكامل مع مكتبة خطوط بخلاف Google Fonts أو لتغيير خط بعض عناصر الموقع فقط. إذا كنت تستخدم Google Fonts وترغب في تغيير الخط عالميًا عبر موقعك، جرب مكون الثيم هذا بدلاً من ذلك: Google Fonts.

سيغطي هذا الدليل:

• استخدام إعدادات الخط المضمنة
• تغيير خط الموقع بخط مخصص
• تطبيق خطوط مختلفة على عناصر محددة

إعدادات الخط المضمنة

يتضمن Discourse أداة اختيار خطوط مدمجة مع مجموعة مختارة من الخطوط المجمعة. هذه هي أبسط طريقة لتغيير خط موقعك دون أي CSS مخصص.

انتقل إلى Admin > Appearance > Fonts للوصول إلى صفحة إعدادات الخط. من هنا يمكنك تعيين:

• الخط الأساسي (Base font) — يُستخدم لمعظم النصوص على الموقع (الافتراضي: Inter)
• خط العناوين (Heading font) — يُستخدم للعناوين (الافتراضي: Inter)
• حجم النص الافتراضي (Default text size) — حجم النص الافتراضي لجميع المستخدمين

تستخدم هذه الإعدادات خصائص CSS المخصصة --font-family و--heading-font-family في الخلفية، والتي يمكن للثيمات تجاوزها أيضًا.

تغيير الخط بخط مخصص

إذا كنت ترغب في استخدام خط غير مدرج في القائمة المضمنة (على سبيل المثال، من Google Fonts أو ملف خط مستضاف ذاتيًا)، يمكنك القيام بذلك عبر مكون ثيم.

1. إنشاء مكون ثيم جديد

   انتقل إلى Admin > Appearance > Themes & Components > Install > Create New. اختر اسمًا وحدد “Component”.

2. تعديل CSS/HTML

   انقر على زر “Edit CSS/HTML”.

   

3. إضافة الخط باستخدام Google Fonts

   إذا كنت ترغب في استخدام خط ويب من Google، أضف ما يلي إلى علامة التبويب Common > CSS الخاصة بك:

   @import url(https://fonts.googleapis.com/css?family=Oswald);
   
   html {
       --font-family: 'Oswald', sans-serif;
       --heading-font-family: 'Oswald', sans-serif;
   }
   

   تأكد من وضع سطر @import url في أعلى ورقة الأنماط.

   في هذا المثال، Oswald هو اسم الخط.

   إذا كانت هناك مشكلة في طريقة @import url، يمكنك بدلاً من ذلك استخدام طريقة 〈link〉 عن طريق إدراج السطر المناسب داخل علامة التبويب Common > /head لمكون الثيم الخاص بك:

   〈link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"〉
   

   ستقوم هذه الطريقة بتغيير خط الموقع عالميًا.

4. تطبيق الخطوط على عناصر محددة
   يمكنك أيضًا تغيير خط الموقع لبعض العناصر فقط.

   لتغيير الخط لبعض العناصر فقط، مثل شريط التنقل أو عناوين المواضيع، أضف:

   @import url('https://fonts.googleapis.com/css?family=Oswald:200,300');
   
   .navigation-container, .link-top-line {
       font-family: 'Oswald', sans-serif;
   }
   

   

   بدلاً من ذلك، لتغيير خط فئة معينة، استخدم:

   body.category-CATEGORY-NAME {
       font-family: 'YOUR-NEW-FONT';
   }
   

5. إضافة المكون الجديد إلى الثيمات الرئيسية

   تأكد من إضافة مكون الثيم الذي تم إنشاؤه حديثًا إلى جميع الثيمات الرئيسية التي يمكن للمستخدمين اختيارها: