Použití vlastních písem na webových stránkách
Textový obsah byl vždy důležitou součástí webových stránek, ale v prvních dnech webu byli návrháři a vývojáři výrazně omezeni typografickou kontrolou , kterou měli nad svými webovými stránkami. To zahrnovalo omezení v písmech, která byla spolehlivě použitelná na svých stránkách. Pravděpodobně jste slyšeli termín "webové bezpečné písma" zmíněný v minulosti. Toto se týkalo malého souboru fontů, které byly vysoce pravděpodobně zahrnuty do osobního počítače, což znamená, že pokud jste na webu použili jedno z těchto písem, byla to jistá sázka, že by se zobrazovala správně v prohlížeči.
Dnes mají weboví profesionálové řadu nových typů písma a typů, s nimiž můžete pracovat, z nichž jedním je formát WOFF.
Co je WOFF?
WOFF je zkratka pro "Web Open Font Format". Je použita pro kompresi písem pro použití s vlastností CSS @ font-face. Je to způsob, jak do webových stránek vkládat písma, takže můžete používat specializovaná písma mimo typické "Arial, Times New Roman, Georgia" - což jsou některé z výše uvedených webových bezpečných písem.
WOFF byl předložen W3C jako standard pro balení písma pro webové stránky. To se stalo pracovním návrhem dne 16. listopadu 2010. Dnes máme vlastně WOFF 2.0, který zlepšuje kompresi z první verze formátu o téměř 30%. V některých případech mohou být tato úspora ještě podstatnější!
Proč používat WOFF?
Webová písma, včetně těch, které jsou dodávány ve formátu WOFF, poskytují spoustu výhod oproti jiným možnostem písma. Stejně užitečné jsou ty písma, které jsou v bezpečí webových stránek, a určitě je stále místo pro ty písma v naší práci, je také dobré rozšířit naše možnosti a otevřít naše typografické možnosti.
WOFF fonty mají následující výhody:
- Jsou přístupnější než písma jako obrázky. WOFF stylů prostý text HTML s CSS, který vám umožní přístupnost a kontrolu designu, které snímky neumožňují.
- Soubory WOFF obsahují typografické informace, jako jsou kontextové formuláře a postavy starého stylu. To dává vašim webovým stránkám lepší typografii, protože používáte správné znaky, nikoliv pouze aproximace.
- WOFF fonty mohou pomoci s internacionalizací, protože můžete vložit písma s znaky z jiných jazyků.
- Stejně jako všechny písma ve stylu CSS, fonty s názvem WOFF jsou více vyhledávacími nástroji. Vyhledávače nevidí text vložený do obrázku a zatímco text ALT může pomoci, nenahrazuje text samotný.
- WOFF fonty jsou komprimovány, takže jsou menší než jiné typy souborů písem. To pomůže s rychlostí stahování webu a celkovým výkonem.
- Soubory WOFF můžete použít k zachování vaší identity značky vložením firemních písem jako souborů WOFF.
Podpora prohlížeče WOFF
WOFF má v moderních prohlížečích vynikající podporu prohlížeče, včetně:
- Chrome 6+
- Firefox 3.6 a vyšší
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
V dnešní době je v zásadě podporován naprosto bez výjimky, a to s výjimkou všech verzí aplikace Opera Mini.
Jak používat písma WOFF
Chcete-li použít soubor WOFF, musíte na svůj webový server nahrát soubor WOFF, dát mu jméno s vlastností @ font-face a poté zavolat písmo ve vašem CSS. Například:
- Nahrajte písmo s názvem myWoffFont.woff do adresáře / fonts webového serveru.
- Ve vašem souboru CSS přidejte sekci @ font-face:
@ font-face {
font-family: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') formát ('woff');
}}
- Přidejte nový název písma (myWoffFont) do vašeho zásobníku písma CSS, stejně jako jiný název písma:
p {
font-family: myWoffFont , Ženeva, Arial, Helvetica, sans-serif;
}}
Kde získat fonty WOFF
Existují dvě skvělé místa, kde najdete spoustu písem WOFF, které jsou zdarma pro komerční a nekomerční použití:
- Otevřete knihovnu písem
- Písmo Squirrel
Pokud máte licenci k použití písma, které není k dispozici ve formátu WOFF, můžete použít tvůrce WOFF jako u písma Squirrel k převodu souborů písma do souborů WOFF. K dispozici je také nástroj příkazového řádku s názvem sfnt2woff, který můžete použít v systémech Macintosh a Windows pro převod písem TrueType / OpenType na WOFF.
Stáhněte si binární soubor odpovídající vašemu systému a spusťte jej na příkazovém řádku (nebo terminálu) a postupujte podle pokynů.
WOFF Příklad
Zde je několik příkladů souborů WOFF: Stránka WOFF na HTML5 ve 24 hodinách.
Původní článek Jennifer Krynin. Editoval Jeremy Girard dne 7.11.17