خطوط جوجل

:discourse2: الملخص Google Fonts هو مكون سمة بسيط يتيح لك إضافة خط من Google Fonts دون الحاجة إلى كتابة أي CSS.
:eyeglasses: معاينة معاينة على منشئ سمات Discourse
:hammer_and_wrench: رابط المستودع https://github.com/discourse/discourse-google-font-component
:open_book: جديد في سمات Discourse؟ دليل المبتدئين لاستخدام سمات Discourse

تثبيت مكون السمة هذا

الميزات

يتيح لك هذا المكون تعيين الخط الرئيسي للموقع، واختيار خطوط منفصلة للعناوين والنصوص أحادية المسافة (كتل الكود) بشكل اختياري. يمكنك أيضًا اختيار وزن الخط في كل حالة، وزيادة حجم الخط.

من الخلف، يقوم هذا بإعداد قليل من CSS بالإضافة إلى link الخاص بـ Google. يرجى ملاحظة أن هذا يعتمد على Google لتقديم ملفات الخطوط من https://fonts.googleapis.com/.

الإعدادات

الاسم الوصف
fonts أضف اسم الخط(وط) الذي تريد استخدامه من fonts.google.com. لاحظ أن أسماء الخطوط حساسة لحالة الأحرف!
body font الخط الرئيسي المستخدم في جميع أنحاء Discourse، يجب تضمينه في إعداد “fonts” أعلاه
body font weight سماكة الخط في النطاق من 100 إلى 900. 400 هو العادي، 700 هو العريض
headline font خط اختياري للعناوين، يجب تضمينه في إعداد “fonts” أعلاه
headline font weight سماكة الخط في النطاق من 100 إلى 900. 400 هو العادي، 700 هو العريض
monospaced font خط اختياري لكتل الكود، يجب تضمينه في إعداد “fonts” أعلاه.
monospaced font weight سماكة الخط في النطاق من 100 إلى 900. 400 هو العادي، 700 هو العريض
normal font size حجم الخط الافتراضي لجميع المستخدمين، تعديل هذا سيعدل جميع أحجام الخطوط بشكل متناسب
smaller font size قابل للاختيار في تفضيلات واجهة كل مستخدم
larger font size قابل للاختيار في تفضيلات واجهة كل مستخدم
largest font size قابل للاختيار في تفضيلات واجهة كل مستخدم

:discourse2: مستضاف من قبلنا؟ تتوفر مكونات السمات للاستخدام على خططنا القياسية والأعمال والمؤسسات.

51 إعجابًا

هذا رائع! هل يمكن تثبيته عدة مرات للربط مع سمات مختلفة عن طريق تغيير اسمه في التثبيت المتقدم؟

لا أرى سببًا يمنع ذلك. فقد قمنا بتثبيت نفس القالب مرتين، على سبيل المثال هنا على Meta، للحصول على نسختين: فاتحة وداكنة.

3 إعجابات

شكرًا لك. لقد نسيت أنه يمكنك إعادة تسميته لتحديده أو ربطه بسمات أخرى.

إعجاب واحد (1)

شكرًا لك. أنا أحب ذلك. :grin:

3 إعجابات

شكرًا :heart: أنا أحبه حقًا.

لقد اكتشفت للتو أن هذه المكونة لا تعمل مع صفحات /pub/ (المنشورة). الخطوط لا يتم تحميلها في هذه الصفحات مما يؤدي إلى خط افتراضي يشبه Times New Roman.

إعجاب واحد (1)

أرى أيضًا الخطوط الافتراضية، ولكن في صفحة تنشيط الحساب على الرابط التالي:

https://yoursite.org/u/activate-account/...

لقد حاولت وهذا بالفعل مشكلة.

تحاول الصفحة المنشورة تحميل خط جوجل من خلال مكون السمة:

image

ملف الخط لا يتم تحميله على الصفحة المنشورة، ولا يعود إلى متغير عائلة الخط `Arial, sans-serif ويستخدم Times New Roman بدلاً من ذلك.

قد يكون هناك مجال للتحسين هنا طالما يمكن للصفحات المنشورة الوصول إلى التعديلات المطلوبة.

إعجاب واحد (1)

بصراحة، منذ هذا الاكتشاف، أقوم بتعريف الخطوط الخاصة بي في CSS مخصص. يعمل بشكل رائع.

إعجابَين (2)

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

تقرير خطأ سريع: لاحظت للتو أنه عندما أقوم بتعيين وزن الخط، فإن النص الغامق لا يظهر كغامق.

لقد اختبرت هذا باستخدام خطوط Work Sans و Zilla Slab. قمت بتغيير وزن الخط من الافتراضي (400) إلى 300. عندما فعلت ذلك، لم يظهر النص الغامق كغامق. قمت بإعادة تعيين هذا الإعداد وعاد النص الغامق للظهور.

لقد قمت بتعيينه على 400 وانتهيت من ذلك، لكنني أردت إخبارك.

شكراً لعملك على هذا!

هل هناك طريقة للتعمق قليلاً في التفاصيل؟ يأتي خط “العنوان” بوزن 900 افتراضيًا مع العناوين داخل المواضيع. سيكون من الرائع تعيين القيم الافتراضية لكل من كائنات Markdown هذه.

إعجاب واحد (1)

يبدو أن هناك خطأ في هذا، على الأقل في منتدى الخاص بي، إذا أضفت الخط “Inter” مع هذا المكون فسيحدث ما يلي:

  • ابدأ في تحرير أو إنشاء رسالة
  • قم بالتبديل إلى تطبيق آخر أثناء فتح نافذة الإنشاء
  • عد، وسيكون التكبير/التصغير خاطئًا تمامًا، كما لو كان مكبرًا جدًا
  • ستكون هناك أيضًا أخطاء مع الدردشة والتمرير الآن

لست متأكدًا مما إذا كان يحدث مع خطوط أخرى، ولكنه يحدث بنسبة 100% من الوقت إذا أضفت هذا المكون إلى أي سمة.

هل هذا خطأ معروف؟ هل هناك حل؟

شكرًا

إعجابَين (2)

لدينا Inter مدمجة بالفعل إذا كنت تريد تغيير خط الأساس وخط العنوان ضمن إعدادات الموقع ؛لا حاجة لمكون

إعجابَين (2)

أي إصدار من Discourse؟ أنا على الإصدار المستقر 3.3 ولا أرى Inter. أواجه نفس المشاكل التي يواجهها بعض المستخدمين هنا مع هذه المكونات.

أنا على الإصدار 3.3 وأريد استخدام Inter. بينما يتم تحميل الخط، فإن النص العريض ليس عريضًا.

ستحتاج إلى التحديث إلى الإصدار 3.4 لخيار “Inter” المدمج

إعجابَين (2)

لقد قمت للتو بدمج إعادة هيكلة لهذا المكون والتي تتماشى بشكل أفضل مع تحديثات Google Font — يجب أن يؤدي هذا إلى حل بعض المشكلات التي كان يواجهها الأشخاص مع عدم ظهور أوزان مختلفة.

لاحظ أن تنسيق الإعداد قد تغير قليلاً بحيث لم يعد من الممكن تضمين الأوزان في إعداد اسم الخط مثل Roboto:300,300i,500، ويجب تحديث هذا إلى Roboto بسيط… ولكن يجب أن يتم الترحيل تلقائيًا عند التحديث.

إعجابَين (2)