ฟอนต์ที่โฮสต์เองและการตกแต่ง

คู่มือนี้ครอบคลุมอะไร

วิธีโฮสต์ไฟล์ .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 โดยตรงไปยังไฟล์ฟอนต์ เลือกโฮสต์ที่อนุญาต hotlink/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: เปิด URL dock/featured ใน OBS > Browser Source > Custom CSS แล้ววางบล็อก CSS ด้านบน
พารามิเตอร์ URL (CSS ที่โฮสต์ไว้): อัปโหลด CSS ไปยังโฮสต์เดียวกับฟอนต์ แล้วต่อท้าย &css=https://your-site.example/my-font.css ลงใน URL หน้า:
```
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 รูปแบบต่าง ๆ)

การปรับเลย์เอาต์ Featured: ปรับ --comment-width, --comment-padding, --comment-area-bottom, และ --comment-area-height เพื่อย้ายตำแหน่งบล็อกแถบด้านล่างโดยไม่แก้ HTML

ใช้การเปลี่ยน CSS ร่วมกับตัวเลือก URL ที่มีอยู่ เช่น &scale, &compact, หรือ &hidesource เมื่อต้องปรับเลย์เอาต์ในแผงด็อก

5) การแก้ปัญหา