Font Subsetter

Paano mag-subset ng font

1. Suriin ang lisensya. Lumilikha ng binagong kopya ng font ang subsetting. Pinapayagan ito ng mga open na lisensya gaya ng SIL Open Font License (OFL) at Apache 2.0; maraming komersyal na lisensya para sa desktop at web ang hindi, o may mga kondisyon. Basahin muna ang lisensya ng iyong font.
2. I-drop ang TTF, OTF o WOFF file sa drop zone, o i-click ito para pumili. Ipinapakita ng panel na Orihinal na font ang pamilya, format, laki ng file, bilang ng glyph at bilang ng mga karakter na imina-map ng font.
3. Piliin ang Mga karakter na pananatilihin: puwedeng pagsamahin ang Basic Latin, Latin-1, Latin, gaya sa Google Fonts, Pranses at Mga digit at simbolo ng numero. Magdagdag ng sarili mong karakter sa Mga karakter mula sa text (pinananatili ang bawat natatanging karakter ng text) o sa Mga Unicode range, na isinusulat gaya ng sa CSS: U+0020-007E, U+2013, U+04??.
4. Lagyan ng tsek ang Alisin ang hinting kung gusto mo ng pinakamaliit na posibleng file.
5. I-click ang I-subset ang font. Nilo-load ang engine (mga 650 KB) sa unang beses, saka pinoproseso ang font sa iyong device.
6. Ihambing ang mga laki sa Resulta, tingnan ang Preview ng subset, saka gamitin ang I-download ang TTF (o OTF) at I-download ang WOFF, at kopyahin ang CSS @font-face na rule.

Hindi umaalis sa iyong computer ang font file: binabasa, sinasa-subset at ipinapakete ito pabalik sa browser. Walang ini-type mo na ipinapadala sa server.

Tip para sa Filipino: sakop ng Latin-1 ang ñ (U+00F1), kaya sapat na ang Latin-1 o Latin, gaya sa Google Fonts para sa karaniwang tekstong Filipino. Ang preset na Pranses ay para sa mga akdang Pranses.

Ano ang ginagawa ng subsetting

Madalas na may daan-daan o libu-libong glyph ang isang font: Cyrillic, Greek, Vietnamese, mga simbolo, mga alternatibo. Maliit na bahagi lang nito ang ginagamit ng pahinang nakasulat sa Ingles o Filipino. Pinapatakbo ng tool na ito ang hb-subset, ang subsetter ng HarfBuzz text engine (ang parehong code na ginagamit ng Google Fonts at maraming build tool), na na-compile sa WebAssembly. Pinananatili nito ang mga glyph para sa mga karakter na pinili mo, dagdag ang mga glyph na kailangan ng mga OpenType feature para maipakita ang mga ito (mga ligature gaya ng “fi”, small caps at mga letrang may accent kapag naaabot mula sa iyong mga karakter), at inaalis ang iba. Pinaliliit din ang kerning at iba pang layout table.

Karaniwang resulta: ang buong font na Latin + Cyrillic + Greek na 300 KB ay maaaring bumaba sa 20 o 30 KB para sa tekstong Pranses, at ang logo font na na-subset sa mga letra ng iisang salita ay madalas na ilang kilobyte lang ang bigat.

Inililista ng linyang Wala sa font ang mga karakter na hiniling mo pero wala sa font. Iguguhit ng mga browser ang mga ito gamit ang fallback font.

Mga output format at unicode-range

• TTF/OTF: pinananatili ng subset ang uri ng outline ng orihinal (TrueType o CFF).
• WOFF: ang parehong font na may bawat table na kino-compress gamit ang zlib. Binabasa ito ng bawat kasalukuyang browser. Dine-decompress muna ang WOFF na input.
• Hindi available ang WOFF2: walang encoder sa browser para sa Brotli compression at table transform nito, at hindi rin mababasa rito ang mga WOFF2 file. I-convert muna ang WOFF2 sa TTF (halimbawa gamit ang fontTools). Maaari ding i-compress ng iyong server ang TTF/OTF gamit ang gzip o Brotli habang inihahain.

Inililista ng CSS @font-face na rule ang WOFF file muna, itinatakda ang font-display: swap at nagdaragdag ng unicode-range na binuo mula sa mga karakter na talagang nasa subset. Sa unicode-range, dina-download lang ng browser ang file kapag gumamit ang pahina ng isa sa mga karakter na iyon, kaya puwede mong hatiin ang pamilya sa ilang file (halimbawa Latin at Cyrillic) at hayaang ang kailangan lang ang i-load ng bawat bisita. I-edit ang Pangalan ng font-family para tumugma sa pangalang ginagamit sa iyong stylesheet.