Webová písma CSS

Obsah

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.

Až najdete/zakoupíte písmo, které chcete použít, stačí přidat písmo soubor na vašem webovém serveru a v případě potřeby se automaticky stáhne uživateli.

Vaše „vlastní“ písma jsou definována v pravidle CSS @font-face.

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 Mac OS i Microsoft operační systémy 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 Microsoft. OpenType fonty se dnes běžně používají na majoru počítačové platformy.

Formát písma WOFF (Web Open Font Format)

WOFF je formát písma pro použití na webových stránkách. Byl vyvinut v roce 2009 a je nyní doporučení W3C. WOFF je v podstatě OpenType nebo TrueType kompresi a další metadata. Cílem je podpořit distribuci písem ze serveru na klienta přes síť s omezením šířky pásma.

Formát písma Web Open (WOFF 2.0)

Písmo TrueType/OpenType, které poskytuje lepší kompresi než WOFF 1.0.

Písma/tvary SVG

Písma SVG umožňují použít SVG jako glyfy při zobrazování textu. SVG 1.1 specifikace definují modul písem, který umožňuje vytváření písem v rámci SVG dokument. 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 k 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 pravidle @font-face; nejprve definujte název pro písmo (např. myFirstFont) a poté přejděte na soubor písma.

Tip: V adrese 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 vlastnosti font-family:

Příklad

@font-face
{
   
font-family: myFirstFont;
   
src: url(sansation_light.woff);
}

div
{
   
font-family: myFirstFont;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
</div>

</body>
</html>

Použití tučného textu

Musíte přidat další pravidlo @font-face obsahující deskriptory pro tučný text:

Příklad

@font-face
{
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
   
font-weight: bold;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

@font-face {
   font-family: myFirstFont;
   src: url(sansation_bold.woff);
   font-weight: bold;
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>

</body>
</html>

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 pravidel @font-face pro stejné písmo.

CSS deskriptory písem

V následující tabulce jsou uvedeny všechny deskriptory písem, které lze definovat v pravidle @font-face:

Deskriptor:

font-family

Hodnoty:

name

Popis:

Požadované. Definuje název pro písmo

Deskriptor:

src

Hodnoty:

URL

Popis:

Požadované. Definuje URL souboru písem

Deskriptor:

font-stretch

Hodnoty:

normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded

Popis:

Volitelný. Definuje, jak má být písmo roztaženo. Výchozí hodnota je "normální"

Deskriptor:

font-style

Hodnoty:

normal
italic
oblique

Popis:

Volitelný. Definuje, jak má být písmo stylizováno. Výchozí hodnota je "normální"

Deskriptor:

font-weight

Hodnoty:

normal
bold
100
200
300
400
500
600
700
800
900

Popis:

Volitelný. Definuje tučnost písma. Výchozí hodnota je "normální"

Deskriptor:

unicode-range

Hodnoty:

unicode-range

Popis:

Volitelný. Definuje rozsah znaků UNICODE, které písmo podporuje. Výchozí hodnota je "U+0-10FFFF"