Vlastní hosting písem a stylování

Co tento průvodce obsahuje

Jak sami hostovat soubory .ttf, .otf nebo .woff2 (bez nutnosti písma Google nebo systémového písma).
Jak tato písma načíst v dock.html nebo featured.html pomocí parametrů URL nebo vlastního CSS v OBS.
Které proměnné CSS upravují velikost textu a rozvržení na obou stránkách.
Rychlé náhradní možnosti, pokud chcete nadále používat Google Fonts nebo nainstalovaná systémová písma.

Zpráva překryvu featured.html vykreslená písmem Pacifico s avatarem a jmenovkou — Stejný `featured.html` překryv s `&googlefont=Pacifico` — vlastní hostovaná písma fungují stejným způsobem pomocí `@font-face`.

1) Umístěte soubory písem na hosting

Potřebujete přímý odkaz HTTPS na soubor písma. Vyberte hosting, který umožňuje přímé odkazování/CORS, aby jej prohlížeč uvnitř OBS nebo aplikace mohl načíst.

Rychlé možnosti: catbox.moe, 0x0.st, file.io (krátkodobé).
Trvalé možnosti: GitHub Pages, Cloudflare Pages, Netlify, vlastní webový server.
Hostujte pouze písma, která smíte podle licence dále distribuovat. Pokud jsou k dispozici soubory WOFF2, jsou menší a načítají se rychleji než TTF/OTF.

2) Vytvořte CSS

Definujte písmo pomocí @font-face a odkažte na hostovaný soubor, potom nastavte překryv tak, aby jej používal pomocí --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;
}

Potřebujete více písem (pro arménštinu + ruštinu + latinku)? Deklarujte každé font-face a uveďte je v --font-family například 'FontA', 'FontB', 'FontC', sans-serif. Pokud znak chybí, prohlížeč automaticky použije náhradní písmo.

3) Použijte jej v dock.html nebo featured.html

Zdroj Prohlížeč v OBS: Otevřete URL doku/vybrané zprávy v OBS > Zdroj Prohlížeč > Vlastní CSS a vložte výše uvedený blok CSS.

Parametr URL (hostované CSS): Nahrajte CSS na stejný hosting jako písma a potom přidejte &css=https://your-site.example/my-font.css k URL stránky:

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

Vložený parametr URL: Pro rychlé testy můžete předat CSS přímo pomocí &css= nebo jej zakódujte do base64 pomocí &b64css= (podporují je obě stránky).
Rychlé přepnutí písma: &font=YourInstalledFont používá název systémového písma, zatímco &googlefont=Noto+Sans+Armenian,Noto+Sans načítá Google Fonts, pokud nechcete hostovat vlastní písma.

Tyto možnosti fungují stejně v rozšíření Chrome, aplikaci Electron i na hostovaném webu, protože všechny načítají stejné soubory dock.html/featured.html .

4) Dolaďte text překryvu

Základní proměnné typografie používané na obou stránkách:

: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;
}

Další možnosti pouze pro dok: --stylized-emoji, --stylized-img, --text-stroke-width, --text-shadowa barvami řádků (--highlight-base, --highlight-base2a také compact varianty).

Úpravy rozvržení vybrané zprávy: upravte --comment-width, --comment-padding, --comment-area-bottom, a --comment-area-height pro změnu umístění spodního bloku bez úprav HTML.

Kombinujte změny CSS se stávajícími možnostmi URL, například &scale, &compact, nebo &hidesource pokud potřebujete upravit rozvržení doku.

5) Řešení problémů