IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

@font-face - Český CSS 3 manuál

Pomocí CSS 3 pravidla @font-face vytváříme vlastní font s jeho vlastním názvem.

Popis

K vytvoření vlastního fontu a jeho pravidel se používají některé CSS 3 vlastnosti pro font. V jeho těle musíme povinně definovat vlastnost font-family, kterou nastavujeme jméno našeho fontu a poté nastavit src URL adresu s naším fontem. Při nastavování rodiny písma použijeme náš název fontu.

V těle tohoto pravidla můžeme definovat pravidla pro font těmito vlastnostmi:

Podle těchto vlastností se poté také font nastavuje. Pokud tedy máme nastavenou vlastnost font-style na hodnotu italic, všechno písmo psané kurzívou bude používat náš font, ale nebude vypsané kurzívou. Pokud ale našim pravidlům nic neodpovídá, nastaví se font pro celý daný element, kde ho používáme.

Ukázka

Vytvořme si vlastní font s názvem mozillaFont (pochází také z webových stránek Mozilla Developer Network), který bude nastavený pouze pro písmo s kurzívou. V naší ukázce si hlavně všimněte použití fontu a jeho nastavení.

<!DOCTYPE html>
<html>
        <head>
                <style>
                @font-face
                {
                        font-family: mozillaFont;
                        src: url('https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf');
                        font-style: italic;
                }
                p
                {
                        font-family: mozillaFont;
                }
                </style>
                <title>@font-face</title>
        </head>
        <body>
                <p>Tento font je z webu <i>Mozilla Developer Network</i>.</p>
        </body>
</html>

Výsledek:

Pravidlo @font-face v CSS 3 - Text a písmo - CSS vlastnosti

Více o písmu a podobných věcích najdete ve výše uvedených odkazech včetně ukázek.

Poznámka

Font, který nastavujeme jako hodnotu vlastnosti src, musí mít formát .ttf, .otf nebo .woff - tyto tři podporují všechny prohlížeče. Další formáty jsou .woff2, .svg a .eot, kde je podpora slabší.


 

Všechny články v sekci
Text a písmo - CSS vlastnosti
Článek pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Aktivity