Jak používat webová fonty

Sep 12, 2025

jak

Následuje výňatek z příručky Bram Stein's Webfont. Koupit to tady .

Web Fonts. jsou definovány v CSS přes @ font-face pravidlo. Pokud jste webový vývojář, nejpravděpodobnější jste, kopírka a vloženi, nebo v nejméně vidět @ font-face pravidlo.

V zájmu úplnosti však rychleji běžet základním příkladem:

 @ font-face {
  Font-family: Elena;
  SRC: URL (Elena-Regular.woff);
}

To vytváří novou rodinu webových písem, která může být odkazována prostřednictvím font-family nebo písmo zkratka. Ale něco chybí. Při odkazování na webový písmo v zásobníku písma, vždy se ujistěte, že obsahuje alespoň jeden fádní písmo v případě, že webový písmo nezapadne.

Pokud se Elena nedokáže načíst, prohlížeč se vrátí na obecný serif Fonta Fonta:

 p {
  Font-family: Elena, Serif;
}

Je tu více padlých písem, ale teď, pojďme udržet náš zásobník písma jednoduché tím, že zahrnuje pouze obecný serif a sans-serif. rodiny s fontem.

Font rodiny

Vytvoření rodiny písma s více styly se provádí vytvořením @ font-face pravidlo pro každý styl a používat stejné font-family název. Následující @ font-face Pravidla Vytvořit rodinu s normálním a odvážným stylem:

 @ font-face {
     Font-family: Elena;
     SRC: URL (Elena-Regular.woff);
     Hmotnost písma: normální;
}
   @ font-face {
     Font-family: Elena;
     SRC: URL (Elena-Bold.woff);
     Hmotnost písma: tučně;
}

Tuto rodinu písma můžete použít ve vašem CSS tím, že odkazujete na jméno a váhu ve vašich selektorech. To platí pravidelný styl do odstavců a odvážného stylu silný Odstavce:

 p {
  Font-family: Elena, Serif;
}

p silný {
  Hmotnost písma: tučně;
}

kromě font-hmotnost , @ font-face přijímá také. styl fontu a font-stretch. Deskriptory vlastnictví, které definují styly, jako je kurzíva a kondenzována. Všechny tři deskriptory nemovitostí lze použít k vytvoření jedné fonty s více styly. Teoreticky to umožňuje vytvořit rodinu obsahující 243 individuálních stylů (devět font-hmotnost Hodnoty × tří. styl fontu Hodnoty × devět. font-stretch. hodnoty).

V praxi jste však omezeni na 27 hodnot, protože některé prohlížeče nepodporují font-stretch. . Podívejte se na následující tabulka, abyste zjistili, které prohlížeče můžete použít, a podívat se tady podrobnější informace.

Click the icon in the top right to enlarge the image — Kliknutím na ikonu v pravém horním zvětšení zvětšíte obrázek

S trochou štěstí budou zbývající prohlížeče implementovat font-stretch. Vlastnost brzy a budete moci používat všechny klasifikace 243 písem.

Formáty písma

. \ T SRC. Deskriptor vypráví prohlížeč, kde získat soubor písem. Předchozí příklady používaly jeden formát písma, ale často zobrazujete adresy URL na více formátů písma v kombinaci s formátovými rady, které jsou připojeny po URL pomocí adresy URL Formát ("hodnota") syntax.

Formátové rady řekněte prohlížeče, jaký je formát souboru písma v dané adrese URL.

 @ font-face {
  Font-family: Elena;
  SRC: URL (Elena-Regular.woff2) formát ("Woff2"),
       URL (Elena-Regular.woff) formát ("Woff");
}

Pokud uvádíte více formátů, moderní prohlížeče vyberou první formát, který podporuje na základě tipu formátu. Proto je důležité seznam formátů webových písem v pořadí nejlepších komprese.

I přesto, že formátové rady jsou volitelné, vždy je obsahovat - nechali prohlížeč vědět o formátu, aniž byste museli stáhnout písmo. Pokud například prohlížeč nepodporuje Woff2, ale podporuje společnost Woff, může přeskočit soubor fonta Woff2 na základě tipu formátu.

Prohlížeče podporují několik formátů webových písem: Opentype (TrueType), EOT, Woff a Woff2. Některé prohlížeče také podporují písma SVG, ale jsou zastaralé a neměly by se již používat (a neměly by být zaměňovány s Nový formát OpenType-SVG ).

Eot, woff a woff2 jsou technicky ne font formáty. Jsou komprimované soubory Opentype s různým stupněm komprese. Woff2 nabízí nejlepší kompresi, následovaný Woffem a EOT.

Při zkoumání pokrytí pro všechny prohlížeče, můžete narazit něco nazvaný neprůstřelný @ font-face syntax fontspring.

Bulletová syntaxe používá EOT, Woff2, Woff, Raw OpenType a SVG Font soubory pro maximální pokrytí prohlížeče:

 @ font-face {
  Font-family: Elena;
  SRC: URL (Elena.eot? #iefix) formát ("Embedded-Opentype"),
       URL (Elena.woff2) formát ("Woff2"),
       URL (Elena.woff) formát ("Woff"),
       Formát URL (ELENA.OTF) ("OPENTYPE"),
       URL (Elena.Svg # Elena) formát ("SVG");
}

První řádek URL vám může vypadat trochu zvláštní. Verze aplikace Internet Explorer 8 a níže nepodporují syntaxi pro více formátů písma a zacházet s celou hodnotou SRC. vlastnictví jako URL.

Bulletotěsné syntaxe triky Internet Explorer 8 a pod do myšlení, že zbývající adresy URL jsou součástí identifikátoru fragmentu první adresy URL. Protože identifikátory fragmentu jsou při stahování souborů ignorovány, Internet Explorer 8 a níže jednoduše použijte první adresu URL.

Prohlížeče jiné než Internet Explorer přeskočí řádek, protože nepodporují EOT.

Zbytek záznamů je to, co byste očekávali: formáty písma uvedeny v pořadí podle preferencí.

Ale je to nepropustná syntaxe stále relevantní? Ve skutečnosti si myslím, že je to škodlivé. SVG fonty jsou zastaralé a podporovány pouze prohlížeči, které již nejsou používány.

Většina webových stránek podporuje aplikaci Internet Explorer 9 a nahoru, ale syntaxe seznamy EOT jako první preferovaný formát písma. I když Internet Explorer 9 a up podporu Woff, tyto verze budou stále stahovat soubor EOT, jednoduše proto, že je uveden jako první.

Protože většina webových stránek již nepodporuje staré prohlížeče, doporučuji používat zjednodušenou syntaxi. Tato zjednodušená syntaxe pokrývá všechny moderní prohlížeče, stejně jako mírně starší, které jsou stále v aktivním použití, jako je Android 4.4 a starší:

 @ font-face {
  Font-family: Elena;
  SRC: URL (Elena.woff2) formát ("Woff2"),
       URL (Elena.woff) formát ("Woff"),
       Formát URL (ELENA.OTF) ("OPENTYPE");
}

I když jsou starší verze Android stále používány, celosvětová závislost na těchto prohlížečích se rychle zmenšuje. Brzy budete pravděpodobně schopni vypustit syrový formát OpenType a zjednodušit syntaxi ještě dále:

 @ font-face {
  Font-family: Elena;
  SRC: URL (Elena.woff2) formát ("Woff2"),
       URL (Elena.woff) formát ("Woff");
}

V tomto případě někdo běží staršího prohlížeče jednoduše zobrazí vaše fonty fonty namísto webového písma. To je v pořádku; Mohou stále číst obsah v písmu zádra.

Je tu další možná hodnota pro SRC. deskriptor. . \ T místní Funkce má název místní rodiny písem. Pokud se písmo stane nainstalovat v systému, prohlížeč bude používat místo toho, čímž se vyhnout dalšímu stažení.

 @ font-face {
  Font-family: Elena;
  SRC: Místní ("Elena"),
       URL (Elena-Regular.woff2) formát ("Woff2"),
       URL (Elena-Regular.woff) formát ("Woff");
}

I když se to může zdát jako velká optimalizace, nic zaručuje, že místní písmo odpovídá vašemu webovému písmu.

Můžete získat jinou verzi písma, písmo s různými jazykovými podporou, nebo dokonce zcela odlišným písma. Z tohoto důvodu obvykle doporučuji nepoužívat místní Funkce, pokud nenajdete tyto sestupy přijatelné.

To je výňatek z Bram Stein WebFont Handbook. z knihy od sebe. V něm prozkoumá, co je třeba zvážit při výběru webových písem, jak je efektivně používat a jak optimalizovat pro výkon.

Související články:

Co je to sakra blockchain?
30 Chrome rozšíření pro web designéry a devs
20 Úžasné volné fonty Google Web

Jak používat webová fonty

Font rodiny

Formáty písma

jak - Nejoblíbenější články

22 Nejlepší UI Design Tools

Vytvořit animovaný CSS Art

Začínáme s Babelem 7

Jak poskytnout realistické průhledné povrchy

Jak malovat jako mistr 19. století

Naučte se animovat pro děti

Vytvoření uživatelských kartáčů v klipu Studio Barva

Jak budovat světy pro kino

Kategorie