Vytvoření balíčku webového písma
Vyberte písma TTF, OTF, WOFF nebo WOFF2 a vytvořte soubory WOFF2, CSS a HTML náhled. Před integrací na web zkontrolujte ukázkový text a název, váhu, řez a zobrazení během načítání v CSS a poté uložte balíček jako ZIP. Ořez znaků se neprovádí.
Co můžete dělat
Zabalit soubory pro web
Vytvořte WOFF2, CSS a náhled v HTML ze souborů TTF, OTF, WOFF nebo WOFF2. Můžete vybrat více písem najednou.
Zkontrolujte glyfy a nastavení CSS
Zkontrolujte, jak převedena písma vypadají. Podle potřeby můžete změnit názvy, váhy a řezy používané na webu i zobrazení během načítání.
Sdílet sadu jako ZIP
Uložte složku fonts, fonts.css a preview.html jako sadu. Používejte je se zachovanými relativními umístěními.
Jak na to
Vybrat písma společně
Vyberte písma, která můžete používat na webu. Používáte-li více písem, vyberte je společně.
Zkontrolujte vzhled a nastavení webu
Zadejte text pro náhled a zkontrolujte každé písmo. Chcete-li upravit jeho název, váhu nebo jiné možnosti, otevřete nastavení CSS toho písma.
Vytvořit sadu a uložit ZIP
Klikněte na „Vytvořit balíček webových písem“ a uložte vygenerovaný soubor webfont-kit.zip.
Rozbalit a přidat na webovou stránku
Rozbalte soubory tak, aby se zachovalo umístění složky fonts, fonts.css a preview.html. Načtěte CSS na stránce, kde písma použijete, a použijte zadané názvy písem.
Kdy je to užitečné
Připravit webovou stránku ke zveřejnění
Zabalte svá písma do webových formátů a CSS a připravte tak soubory potřebné pro integraci.
Předat kompletní sadu produkčnímu týmu
Zabalte více písem, například prosté a tučné, a předejte je spolu s HTML, který obsahuje text pro kontrolu.
Jak písma a CSS fungují spolu
WOFF2 je formát písma pro web
Připraví se WOFF2 s původními znaky. Znaky nejsou omezeny na podmnožinu. Velikost souboru se liší podle písma.
Zaregistrovat v CSS názvy, váhy a řezy
Tato nastavení určují, které požadované řezy použijí na webu toto písmo. Nemění glyfy písma na tučné nebo kurzívu.
Stejný název rozlišujte podle váhy a řezu
Prosty a tučný řez mohou používat stejný název, ale kombinace názvu, váhy a řezu se nesmí duplikovat.
Vybrat zobrazení během načítání
Ve výchozím stavu se nejprve zobrazí záložní písmo a po připravení se přepne na požadované. Chování čekání a přepnutí můžete v případě potřeby změnit v nastavení CSS.
Zachovat relativní umístění souborů
fonts.css odkazuje na soubory jako fonts/font-1.woff2. Pokud složku nebo CSS přesunete, upravte odpovídajícím způsobem cesty v odkazech.
Často kladené otázky
Kam mám umístit vygenerované soubory?
Rozbalte ZIP a umístěte složku fonts, fonts.css a preview.html tak, aby se zachovaly jejich relativní umístění. Načtěte fonts.css ve své stránce a použijte zadaný název písma v CSS.
Čím se to liší od samotného převodu formátu?
Tato obrazovka zabalí WOFF2 s CSS a náhledem v HTML. Pokud chcete pouze změnit formát písma, použijte „Převod formátu písma“.
Mohu ponechat jen znaky, které používám?
Tato obrazovka neprovádí omezení na podmnožinu znaků. Připravuje písma, která si zachovávají původní znaky.
Proč změna váhy neudělá znaky tučnějšími?
Nastavení určuje hodnotu váhy používanou v CSS. Nemění glyfy v souboru písma. Chcete-li použít tučné nebo kurzívu, poskytněte soubor, který tyto glyfy obsahuje.
Mohu použít více souborů se stejným názvem písma?
Můžete zaregistrovat soubory s různými váhami nebo řezy. Pokud se duplikuje stejná kombinace názvu, váhy a řezu, zkontrolujte příslušná nastavení.
Co se stane, když znovu vyberu písma?
Aktuální sada písem a vygenerovaný ZIP se odstraní a načte se nově vybraná sada. Vyberte všechny soubory, které chcete dál používat spolu s novými.
Co když se nezobrazí všechny ukázkové znaky?
Znaky, které písmo neobsahuje, se mohou zobrazit jiným písmem. Zkontrolujte podporované znaky a jejich vzhled tam, kde se písmo použije.
Co když nelze písmo načíst?
Znovu vyberte písma v podporovaném formátu. Pokud nelze některý soubor sady převést nebo načíst, neuloží se sada, která byla úspěšná jen částečně.
Vstup a výsledky
- Vstup
- TTF, OTF, WOFF a WOFF2. Můžete vybrat více souborů najednou.
- Podmínky
- Zkontrolujte podmínky použití vstupních písem včetně vkládání na web.
- Nastavení
- Názvy, váhy, řezy a zobrazení během načítání používané v CSS.
- Výstup
- webfont-kit.zip. Obsahuje WOFF2, fonts.css a preview.html.