Vlastní písma patří k nejvíce potenciálně zajímavým aspektům CSS3 pro návrháře. Pomocí pravidla font-face můžete vykreslit libovolné písmo, které máte online v textu vašeho webu, bez ohledu na to, zda má uživatel nainstalovaný nebo nikoliv.
Stejně jako u většiny technik CSS3 je základní kód velmi jednoduchý, ale praktická realita je trochu složitější.
V tomto krátkém výukovém programu se budeme zabývat základy vkládání vlastních písem na vaše stránky.
Nejprve se ujistěte, že písmo, které chcete používat, je licencováno pro použití na webu. Téměř všechna volná písma mohou být použita na webových stránkách a mnoho prémiových písem je k dispozici s licencí, která zahrnuje použití webu.
Poté nahrajte vybrané písmo na server. Můžete jej uložit do vyhrazeného adresáře "fonty", ale to je volitelné.
Nezapomeňte zahrnout soubory pro libovolné varianty písma, které plánujete použít, například tučné nebo kurzíva. Můžete použít soubory EOT (Embedded OpenType) pro aplikaci Internet Explorer a OTF (OpenType) nebo TTF (TrueType) pro zbytek. (Další možnosti zahrnují WOFF (Web Open Font Format) a SVG (Scalable Vector Graphics), ale budeme se držet běžnějších typů zde.)
Uvědomte si, kde jsou soubory písma uloženy na vašem serveru.
Otevřete soubor HTML nebo CSS pro stránku, se kterou pracujete. Přidejte prohlášení o písmo-tváři ke kódu stylu:
@font-face {}Nejprve v části písma a obličeje zadáte písmenu jméno, které můžete později použít k jeho uvedení:
font-family: 'lovelyFont';Dále ve složce font-face uvedete umístění souboru EOT:
src: url('fonts/lovely_font.eot');Pokud je to nutné, změňte umístění a název písma. Poté přidejte písmo OTF a / nebo TTF:
src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') Jedná se o holé kosti potřebného kódu, což v mnoha případech stačí. Existují však další kroky, které můžeme provést, aby byl kód spolehlivější. Nejprve rozšířit tuto část tak, aby obsahovala indikátor typu souboru písma:
src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');Jako další volitelná opatření k efektivitě můžeme prohlížeč zkontrolovat pro lokální kopii písma v případě, že jej uživatel již má. Před zadáním adresy URL znovu rozšiřte svůj kód, přidáním místní sekce tak, aby bylo písmo staženo pouze v případě potřeby:
src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.ttf')format('truetype');Přidání je stejné pro OTF i TTF. Po lokálním klíčovém slově určíme název písma.
V tomto případě máme dva řádky, které určují místní písmo, protože název písma obsahuje více než jedno slovo. Spárovaná verze zajišťuje, jak jsou názvy písem uloženy v určitých operačních systémech - tento další řádek není nutný, pokud písmo obsahuje pouze jedno slovo ve svém názvu. Pokud se dozvíte, že písmo může mít různé názvy v různých systémech, uveďte všechny možnosti v místní sekci.
Konečně můžeme použít písmo na prvky stránky. V kódu CSS pro určitý prvek nebo skupinu prvků jednoduše zadejte název písma, který jste použili, včetně jakýchkoli záložních položek, které zvolíte:
div { font-family: 'lovelyFont', sans-serif; }Chcete-li například použít tučnou verzi písma, jednoduše zahrnout jinou část písma a obličeje s adresou URL tučného písma a deklarací "font-weight: bold;". Zadejte tučnou tuhost písma pro libovolný prvek s vlastním písem, který se na ni aplikuje a prohlížeč automaticky vynese tučnou verzi:
/*default version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font.eot');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');}/*bold version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font_bold.eot');src:local('Lovely Font Bold'),local('Lovely-Font-Bold'),url('fonts/lovely_font_bold.otf')format('opentype');font-weight: bold;}/*container element*/div { font-family: 'lovelyFont', sans-serif; }/*span elements inside the container div*/span { font-weight: bold; }A je to!
Používáte funkci CSS3 k rozšíření tvářů typu, které máte k dispozici? Používáte službu jako Typekit společnosti Adobe nebo Webfonty společnosti Google? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, obrázek písma přes Shutterstock.