自行托管字体与样式 - 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 或你自己的 Web 服务器。
仅托管你有权再分发的字体。如可选择，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）故障排除