PC-politika.cz - Novinky: GRAFIKA: Používat stahovatelné fonty? (A) PC-politika

GRAFIKA: Používat stahovatelné fonty? (A)

Pokud chcete mít na svých stránkách netradiční písma, která by čtenáře zaujala (jelikož je nemá na PC nainstalované), máte volbu v použití tzv. stahovatelných dynamických fontů prostřednictvím souborů *.eot. O tom a souvislostech je tento článek.

Pokud chcete mít na svých stránkách netradiční písma, která by čtenáře zaujala (jelikož je nemá na PC nainstalované), máte volbu v použití tzv. stahovatelných dynamických fontů prostřednictvím souborů *.eot. O tom a souvislostech je tento článek.

Případně můžete zvolit i předpřipravené dynamické fonty. Do HTML/CSS se tyto fonty vkládají pomocí zápisu @font-face { }. Je ovšem nutné připomenout, že ve specifikaci CSS-2 se tato možnost již nevyskytuje a není ani v pracovní verzi CSS-3. Přesto však tento způsob stále funguje

Definice umístění fontu

Pokud jsem napsal, že funguje, tak musím dodat, že pouze v IE od verze 4. Opera a Firefox tuto dynamickou definici umísťování zápisem @font-face { } již nepodporují. V Netscape jsem to nezkoušel. Vedle tohoto zápisu (pravidla) je důležité použít descriptor src. Ten určuje kde je uložen fyzický soubor s fontem. Jeho hodnotu pak určuje funkce URL a uvedený soubor *.eot s příslušným typem písma. Tento soubor si musíte vytvořit sami programem WEFT. Jak se to dělá, podrobně popisuje Yuhů - Dušan Janovský. CSS deklarace pak výpadá následovně:

Připravené fonty

Pohodlnější je ovšem používat pro vizualizaci www dokumentů předpřipravené fonty. Touto službou se sice zabývá méně subjektů, ale přece jen někoho jsem našel. Takový příklad je např. na W3.org-fonty, kde je odkazováno na fonty Robson Celtic. Deklarujete prostě ve stylopisu název konkretního fontu, včetně URL adresy a určení druhu písma (např. H1). Je to velice jednoduché, stačí měnit druh písma, třeba na Verdanu, jak je to v ukázce a písmo se vám změní.

<HTML>

<HEAD>

<TITLE>Font test</TITLE>

<STYLE TYPE="text/css" MEDIA="screen, print">

@font-face {

font-family: "Robson Celtic";

src: url("http://site/fonts/rob-celt")

}

H1 { font-family: "Robson Celtic", verdana }

</STYLE>

</HEAD&

<BODY>

<H1> Text je v Robson Celtic "verdana"</H1>

</BODY>

</HTML>

Ukázka stahnutelného typu písma

Resumé

Tento text, původně z r. 2006, jsem aktualizoval, především pro změnu adresy na stahovatelné fonty. Nicméně, je dobré si oživit popisovaný způsob. V každém případě nám zkvalitní naši tvorbu.