عرض الخط: تبديل

ساهم تجربة المستخدم
1

مرحبًا،

لاحظت أن خط Google يُستخدم (وأنا أعرف من الإعدادات أنه يمكن اختيار أكثر من خط).

لتحسين تجربة المستخدم قبل تحميل الخط، من الجيد إضافة &display=swap إلى محمل CSS الخاص بـ Google.

إذن: css?family=Open+Sans:400,400i,700

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url(...) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

تصبح: css?family=Open+Sans:400,400i,700&display=swap

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(...) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

اقرأ المزيد في:

ملاحظة: توجد بعض النقاط لأنني لا أستطيع لصق أكثر من رابطين في منشور كعضو جديد :wink:

إعجابَين (2)
2

font-display: swap; يؤثر على وقت الحظر والتبديل عند انتظار تحميل الخط، لكننا ندرج الخط من الخادم (لدينا gem-discourse-fonts منفصل — بهذه الطريقة نتجنب إجراء اتصال بـ Google وتتبعنا).

لذلك، نظرًا لأن الخطوط تُدرج كجزء من تطبيق Discourse عند التحميل الأولي، لا أعتقد أننا سنلاحظ أي فائدة لأن الخطوط لا تعيق العرض كما لو كنا نتصل بـ Google (أو شبكة توصيل محتوى أخرى) في ملف CSS الخاص بنا.

ومع ذلك، لا يزال استخدام font-display: swap; نصيحة جيدة لأي شخص يضيف خطوطًا مخصصة من شبكة توصيل محتوى تابعة لطرف ثالث في سمة ما.

6 إعجابات
3

هممم… هل try.discourse.org مثال تمثيلي يمكن الاطلاع عليه عند التعامل مع مشكلات الأداء؟

لاحظت أن الخطوط تم تحميلها من Google هناك، وافترضت أنها مسألة عالمية.

Screen Shot 2020-11-17 at 22.42.45
Screen Shot 2020-11-17 at 22.42.45986×490 66.7 KB

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

آه، هذا منطقي. قمنا باستيراد الخط في Try لأن لدينا رأسًا يطابق discourse.org (الذي يستخدم Open Sans)… يمكننا استخدام swap هناك أو حتى تضمين الخط مباشرة في السمة.

يمكنك استخدام Try عند استكشاف مشكلات الأداء، ولكن ربما تستخدم الوضع الآمن للتأكد من أن الأمر لا يتعلق بالتخصيص البسيط الذي أضفناه.

4 إعجابات