Webová písma CSS
Pravidlo CSS @font-face
Webová písma umožňují webovým návrhářům používat písma, která nejsou nainstalována v počítači uživatele.
Když najdete/zakoupíte písmo, které chcete použít, stačí zahrnout soubor s písmem na váš webový server a v případě potřeby se automaticky stáhne uživateli.
Vaše "vlastní" fonty jsou definovány v @font-facepravidle CSS.
Různé formáty písem
Písma TrueType (TTF)
TrueType je standard písem vyvinutý na konci 80. let společnostmi Apple a Microsoft. TrueType je nejběžnější formát písma pro operační systémy Mac OS i Microsoft Windows.
Písma OpenType (OTF)
OpenType je formát pro škálovatelná počítačová písma. Byl postaven na TrueType a je registrovanou ochrannou známkou společnosti Microsoft. Písma OpenType se dnes běžně používají na hlavních počítačových platformách.
Web Open Font Format (WOFF)
WOFF je formát písma pro použití na webových stránkách. Byl vyvinut v roce 2009 a nyní je doporučením W3C. WOFF je v podstatě OpenType nebo TrueType s kompresí a dalšími metadaty. Cílem je podporovat distribuci písem ze serveru ke klientovi přes síť s omezeními šířky pásma.
Web Open Font Format (WOFF 2.0)
Písmo TrueType/OpenType, které poskytuje lepší kompresi než WOFF 1.0.
SVG písma/tvary
Písma SVG umožňují použít SVG jako glyfy při zobrazování textu. Specifikace SVG 1.1 definuje modul písem, který umožňuje vytváření písem v dokumentu SVG. CSS můžete také použít na dokumenty SVG a pravidlo @font-face lze použít na text v dokumentech SVG.
Vložená písma OpenType (EOT)
Písma EOT jsou kompaktní formou písem OpenType navržených společností Microsoft pro použití jako vložená písma na webových stránkách.
Podpora prohlížeče pro formáty písem
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje formát písma.
| Font format | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*IE: Formát písma funguje pouze tehdy, je-li nastaven jako „instalovatelný“.
Použití požadovaného písma
V @font-facepravidle; nejprve definujte název pro písmo (např. myFirstFont) a poté ukažte na soubor písma.
Tip: V URL písma vždy používejte malá písmena. Velká písmena mohou v IE způsobit neočekávané výsledky.
Chcete-li použít písmo pro prvek HTML, podívejte se na název písma (myFirstFont) prostřednictvím font-familyvlastnosti:
Příklad
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Použití tučného textu
Musíte přidat další @font-facepravidlo obsahující deskriptory pro tučný text:
Příklad
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Soubor "sansation_bold.woff" je další soubor písma, který obsahuje tučné znaky pro písmo Sansation.
Prohlížeče to použijí vždy, když by se text s rodinou písem "myFirstFont" měl vykreslit tučně.
Tímto způsobem můžete mít mnoho @font-facepravidel pro stejné písmo.
CSS deskriptory písem
V následující tabulce jsou uvedeny všechny deskriptory písem, které lze definovat v @font-facepravidle:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |