自行託管字型與樣式 - Social Stream Ninja

本指南涵蓋的內容

如何自行託管 .ttf、.otf 或 .woff2 檔案（無需使用 Google 字型或系統字型）。
如何在下列頁面中載入這些字型： dock.html 或 featured.html ，可透過 URL 參數或 OBS 自訂 CSS 實作。
哪些 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 瀏覽器來源： 在 OBS 中開啟你的 dock/featured URL，前往「瀏覽器來源 > 自訂 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 編碼的 CSS： &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）疑難排解