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

HTML a CSS Manuál Text a písmo @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

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ší.


 

  Aktivity (1)

Manuál pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.

Miniatura
Všechny články v sekci
Text a písmo - CSS vlastnosti

 

 

Komentáře

Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Matúš Petrofčík:

Poriešiš aj kompatibilitu so všetkými prehliadačmi, teda aj iné typy písem a ukážku ako ich povkladať, aby fungovali všade?

Odpovědět 22.7.2015 10:23
obsah kocky = r^2 ... a preto vlak drnká
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Matúš Petrofčík
IT Man:

On je problém najít nějaký font vůbec, protože toto pravidlo podporuje jen ty s koncovkou. A pokud nějaký najdeš, je to většinou ten s podporovanou. Ty ostatní jsou podporovány jen jedním dvěma prohlížeči. :)

Odpovědět 22.7.2015 10:27
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Odpovídá na IT Man
Matúš Petrofčík:

Tak ja mám v hlave toto:

TTF - Works in most browsers except IE and iPhone.
EOT - IE only.
WOFF - Compressed, emerging standard.
SVG - iPhone/iPad.

Ak je situácia iná, tak ok, TTF stačí.

Odpovědět 22.7.2015 20:02
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Matúš Petrofčík:

Web Open Font Format (.woff): For all modern browsers
Embedded Open Type: For older versions of Internet Explorer (IE< =8)
SVG fonts: For older versions of iOS Safari (3.2-4.1)
Truetype fonts: For older versions of the default android browser

@font-face {
  font-family: 'abril_fatfaceregular';
  src: url('abrilfatface-regular-webfont.eot');
  src: url('abrilfatface-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('abrilfatface-regular-webfont.woff') format('woff'),
       url('abrilfatface-regular-webfont.ttf') format('truetype'),
       url('abrilfatface-regular-webfont.svg#abril_fatfaceregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

http://www.sitepoint.com/…onts-part-1/

Odpovědět  +1 22.7.2015 20:08
obsah kocky = r^2 ... a preto vlak drnká
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.