الخطوط المستضافة ذاتياً والتنسيق

ما يغطيه هذا الدليل

كيفية استضافة ملفات .ttf أو .otf أو .woff2 بنفسك (دون الحاجة إلى خطوط Google أو النظام).
كيفية تحميل هذه الخطوط في dock.html أو featured.html باستخدام معاملات URL أو CSS المخصص في OBS.
متغيرات CSS التي تضبط حجم النص وتخطيطه في الصفحتين.
بدائل سريعة إذا أردت الاستمرار في استخدام Google Fonts أو خطوط النظام المثبتة.

رسالة في تراكب featured.html معروضة بخط Pacifico مع صورة رمزية ووسم اسم — التراكب نفسه `featured.html` مع `&googlefont=Pacifico` مطبّقاً — تعمل الخطوط المستضافة ذاتياً بالطريقة نفسها عبر `@font-face`.

1) استضافة ملفات خطوطك

تحتاج إلى رابط HTTPS مباشر لملف الخط. اختر استضافة تسمح بالربط المباشر وCORS كي يستطيع المتصفح داخل OBS أو التطبيق جلبه.

خيارات سريعة: catbox.moe أو 0x0.st أو file.io (قصير الأجل).
خيارات دائمة: GitHub Pages أو Cloudflare Pages أو Netlify أو خادم الويب الخاص بك.
استضف فقط الخطوط التي تملك ترخيص إعادة توزيعها. تكون ملفات WOFF2، عند توفرها، أصغر وأسرع تحميلاً من TTF/OTF.

2) إعداد CSS

عرّف الخط باستخدام @font-face ووجّهه إلى ملفك المستضاف، ثم اضبط التراكب لاستخدامه عبر --font-family.

@font-face {
  font-family: 'MyDockFont';
  src: url('https://your-site.example/fonts/MyDockFont.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
}

/* Optional second weight */
@font-face {
  font-family: 'MyDockFont';
  src: url('https://your-site.example/fonts/MyDockFont-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
}

:root {
  --font-family: 'MyDockFont', 'Segoe UI', 'Arial Unicode MS', sans-serif;
  --comment-font-size: 28px;
  --author-font-size: 24px;
  --message-line-height: 32px;
}

تحتاج إلى عدة خطوط (للأرمنية والروسية واللاتينية)؟ عرّف كل font-face وأدرجها في --font-family مثل 'FontA', 'FontB', 'FontC', sans-serif. سيستخدم المتصفح الخط البديل تلقائياً عند غياب رمز.

3) تطبيقه على dock.html أو featured.html

مصدر متصفح OBS: افتح رابط dock/featured في OBS > مصدر المتصفح (Browser Source) > CSS مخصص (Custom CSS)، والصق كتلة CSS أعلاه.

معامل URL ‏(CSS مستضاف): ارفع CSS إلى الاستضافة نفسها لخطوطك، ثم أضف &css=https://your-site.example/my-font.css إلى رابط الصفحة:

https://socialstream.ninja/dock.html?session=YOURSESSION&css=https://your-site.example/my-font.css
https://socialstream.ninja/featured.html?session=YOURSESSION&css=https://your-site.example/my-font.css

معامل URL مضمن: للاختبارات السريعة، يمكنك تمرير CSS مباشرةً باستخدام &css= أو رمّزه بصيغة base64 باستخدام &b64css= (تدعم الصفحتان هذه الخيارات).
تبديل سريع للخطوط: &font=YourInstalledFont يستخدم اسم خط نظام، بينما &googlefont=Noto+Sans+Armenian,Noto+Sans يحمّل Google Fonts إذا كنت تفضل عدم الاستضافة الذاتية.

تعمل هذه الخيارات بالطريقة نفسها في إضافة Chrome وتطبيق Electron والموقع المستضاف، لأنها جميعاً تحمّل ملفات dock.html/featured.html نفسها.

4) ضبط نص التراكب

متغيرات تنسيق النص الأساسية التي تستخدمها الصفحتان:

:root {
  --font-family: 'MyDockFont', 'FontB', sans-serif;
  --comment-font-size: 28px;  /* message text size */
  --author-font-size: 24px;   /* name text size */
  --comment-font-weight: 600; /* featured.html */
  --author-font-weight: 700;  /* featured.html */
  --message-font-weight: 500; /* dock.html */
  --name-font-weight: 700;    /* dock.html */
  --comment-color: #ffffff;
  --author-color: #ffe08a;
  --comment-bg-color: #161616;
  --author-bg-color: #202020;
}

إضافات خاصة بلوحة الإرساء: --stylized-emoji, --stylized-img, --text-stroke-width, --text-shadow، وألوان الصفوف (--highlight-base, --highlight-base2، إضافةً إلى compact ومشتقاتها).

تعديلات تخطيط الرسائل المميزة: اضبط --comment-width, --comment-padding, --comment-area-bottom، و --comment-area-height لتغيير موضع كتلة الثلث السفلي دون تعديل HTML.

اجمع تغييرات CSS مع خيارات URL الموجودة مثل &scale, &compact، أو &hidesource عندما تحتاج إلى تعديل تخطيط لوحة الإرساء.

5) استكشاف المشكلات وإصلاحها