Subsetare fonturi

Cum subsetezi un font

1. Verifică licența. Subsetarea creează o copie modificată a fontului. Licențele deschise precum SIL Open Font License (OFL) și Apache 2.0 o permit; multe licențe comerciale pentru desktop și web nu o permit sau o permit doar în anumite condiții. Citește mai întâi licența fontului tău.
2. Trage un fișier TTF, OTF sau WOFF în zona de încărcare sau apasă pe ea ca să alegi unul. Panoul Fontul original arată familia, formatul, dimensiunea fișierului, numărul de glife și numărul de caractere pe care le acoperă fontul.
3. Alege Caractere de păstrat: Latin de bază, Latin-1, Latin, ca în Google Fonts, Franceză și Cifre și semne numerice pot fi combinate. Adaugă propriile caractere în Caractere dintr-un text (fiecare caracter distinct din text este păstrat) sau în Intervale Unicode, scrise ca în CSS: U+0020-007E, U+2013, U+04??.
4. Bifează Elimină hinting-ul dacă vrei cel mai mic fișier posibil.
5. Apasă Subsetează fontul. Motorul (aproximativ 650 KB) se încarcă prima dată, apoi fontul este prelucrat pe dispozitivul tău.
6. Compară dimensiunile în Rezultat, uită-te la Previzualizarea subsetului, apoi folosește Descarcă TTF (sau OTF) și Descarcă WOFF și copiază regula CSS @font-face.

Pentru paginile în română, presetarea „Latin, ca în Google Fonts” și Latin extins (care conține ă, â, î, ș, ț) sunt bifate implicit; dacă fontul tău este folosit doar pentru text românesc, acestea sunt de obicei suficiente.

Fișierul de font nu îți părăsește calculatorul: este citit, subsetat și reambalat în browser.

Ce face subsetarea

Un font conține adesea sute sau mii de glife: chirilice, grecești, vietnameze, simboluri, variante alternative. O pagină scrisă în română, engleză sau franceză folosește doar o parte dintre ele. Acest instrument rulează hb-subset, subsetatorul motorului de text HarfBuzz (același cod folosit de Google Fonts și de multe instrumente de build), compilat în WebAssembly. Păstrează glifele pentru caracterele selectate, plus glifele de care au nevoie funcțiile OpenType ca să le afișeze (ligaturi precum „fi”, majuscule mici și forme cu accente, când pot fi atinse din caracterele tale), și elimină restul. Kerningul și celelalte tabele de aranjare sunt reduse corespunzător.

Rezultate tipice: un font complet latin + chirilic + grecesc de 300 KB poate scădea la 20 sau 30 KB pentru text în franceză, iar un font de logo subsetat la literele unui singur cuvânt cântărește adesea câțiva kiloocteți.

Linia Lipsesc din font listează caracterele cerute de tine pe care fontul nu le are. Browserele le vor desena cu un font de rezervă.

Formate de ieșire și unicode-range

• TTF/OTF: subsetul păstrează tipul de contur al originalului (TrueType sau CFF).
• WOFF: același font, cu fiecare tabel comprimat cu zlib. Orice browser actual îl citește. Un fișier WOFF de intrare este mai întâi decomprimat.
• WOFF2 nu este disponibil: compresia lui Brotli și transformările de tabele nu au codificator în browser, iar fișierele WOFF2 nu pot fi citite nici ele aici. Convertește mai întâi WOFF2 în TTF (de exemplu cu fontTools). Serverul tău poate comprima TTF/OTF și din mers cu gzip sau Brotli.

Regula CSS @font-face listează întâi fișierul WOFF, setează font-display: swap și adaugă un unicode-range construit din caracterele prezente efectiv în subset. Cu unicode-range, browserul descarcă fișierul doar când pagina folosește unul dintre acele caractere, deci poți împărți o familie în mai multe fișiere (de exemplu latin și chirilic) și lași fiecare vizitator să încarce doar ce are nevoie. Editează Numele font-family ca să corespundă numelui folosit în foaia ta de stil.