Własny hosting czcionek i style — Social Stream Ninja

Zakres poradnika

Jak samodzielnie hostować pliki .ttf, .otf lub .woff2 (bez Google i bez instalacji systemowej).
Jak wczytać te czcionki do dock.html lub featured.html za pomocą parametrów URL lub własnego CSS OBS.
Które zmienne CSS zmieniają rozmiar tekstu i układ na obu stronach.
Szybkie alternatywy, jeśli chcesz nadal używać Google Fonts lub zainstalowanych czcionek systemowych.

Wiadomość nakładki featured.html wyświetlona czcionką Pacifico z awatarem i etykietą imienia — Ten sam `featured.html` nakładka z `&googlefont=Pacifico` zastosowany — własne hostowane czcionki działają tak samo przez `@font-face`.

1) Umieść pliki czcionek na serwerze

Potrzebujesz bezpośredniego linku HTTPS do pliku czcionki. Wybierz host ze zgodą na hotlinking/CORS, aby przeglądarka w OBS lub aplikacji mogła go pobrać.

Szybkie opcje: catbox.moe, 0x0.st, file.io (krótkotrwałe).
Trwałe rozwiązania: GitHub Pages, Cloudflare Pages, Netlify lub własny serwer WWW.
Hostuj tylko czcionki, które wolno ci redystrybuować. Jeśli są dostępne, pliki WOFF2 są mniejsze i ładują się szybciej niż TTF/OTF.

2) Przygotuj CSS

Zdefiniuj czcionkę za pomocą @font-face i wskaż hostowany plik, a następnie ustaw używanie tej czcionki w nakładce przez --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;
}

Potrzebujesz kilku czcionek, np. dla ormiańskiego, rosyjskiego i łaciny? Zadeklaruj każde font-face i wymień je w --font-family np. 'FontA', 'FontB', 'FontC', sans-serif. Przeglądarka automatycznie użyje zamiennika, jeśli zabraknie znaku.

3) Zastosuj do dock.html lub featured.html

Źródło przeglądarki OBS: Otwórz swój URL dock/featured w OBS > Źródło przeglądarki > Własny CSS i wklej powyższy blok CSS.

Parametr URL (hostowany CSS): Prześlij CSS na ten sam serwer co czcionki, a następnie dodaj &css=https://your-site.example/my-font.css do URL strony:

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

Bezpośredni parametr URL: Do szybkich prób możesz przekazać CSS bezpośrednio przez &css= lub zakoduj jako Base64 za pomocą &b64css= (obie strony je obsługują).
Szybka zmiana czcionki: &font=YourInstalledFont używa nazwy czcionki systemowej, a &googlefont=Noto+Sans+Armenian,Noto+Sans ładuje Google Fonts, jeśli nie chcesz samodzielnego hostingu.

Opcje działają tak samo w rozszerzeniu Chrome, aplikacji Electron i hostowanej witrynie, ponieważ wszystkie ładują te same dock.html/featured.html pliki.

4) Dostosuj tekst nakładki

Podstawowe zmienne typografii używane przez obie strony:

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

Dodatki tylko dla doku: --stylized-emoji, --stylized-img, --text-stroke-width, --text-shadowi kolory wierszy (--highlight-base, --highlight-base2oraz compact warianty).

Zmiany układu wyróżnionej wiadomości: dostosuj --comment-width, --comment-padding, --comment-area-bottom i --comment-area-height aby przesunąć blok dolnej belki bez edycji HTML.

Łącz zmiany CSS z istniejącymi opcjami URL, takimi jak &scale, &compact lub &hidesource gdy chcesz zmienić układ doku.

5) Rozwiązywanie problemów