Email: info@firemniweb.comTel.: +420 737 111 709 Facebook Twitter RSS firemniweb.com - blog

Píšeme vám o novinkách a věcech, které vás zajímají...

Muž

Používáme různé typy písem alá @fontface

Pokud potřebujete na svých webových stránkách jiné než standartní písma máte dvě možnosti. Buď použijete cufón a nebo právě „novou“ vlastnost CSS3 @fontface. V článku si ukážeme jak používat právě druhou možnost a na co si dát pozor.

Jsem línej! Využíváme generátorů

Použití je velice jednoduché. Existuje totiž mnoho generátorů, které udělají vše vlastně za nás. Například @font-face kit generator. Požadované písmo pouze nahrajeme (ve fotmátu .ttf nebo otf) a necháme si vygenerevat ostatní formáty .woff, .eot, .svg

Vybereme si tedy požadované písmo a vložíme do generátoru. Necháme ho aby nám vygeneroval .zip soubor, který si rozbalíme a celý nahrajeme do předem připravené složky „font“.

V našem příkladě budeme využívat free font „Cyr-lat Csl Cz“ z ceskefonty.cz

Jdeme kódovat

Vytvoříme si HTML stránku index.html v tomto tvaru:


<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <h1>Tuhle větu vypíšu pomocí fontface </h1>
        <p>Klasický odstavec vypsaný písmem Arial</p>
    </body>
</html>

Dál vytvoříme soubor style.css s CSS styly:



  @font-face {
    font-family: 'Cyr-lat';
    src: url('font/cyr-latcslcz.eot');
    src: url('font/cyr-latcslcz.eot?#iefix') format('embedded-opentype'),
    url('font/cyr-latcslcz.woff') format('woff'),
    url('font/cyr-latcslcz.ttf') format('truetype'),
    url('font/cyr-latcslcz.svg#DroidSerif') format('svg');
    font-weight: normal;
    font-style: normal;
    }

h1 {
    font-family: 'Cyr-lat';
    }

p {
    font-family: Arial, serif;
    }

CSS styly následně nalinkujeme do HTML hlavičky:


<head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!--linkování CSS --><link rel="stylesheet" href="style.css" type="text/css" media="screen,projection" charset="utf-8"/>
</head>

Na co si dát pozor?

  • Především jestli font podporuje české znaky popřípadě slovenské
  • Autorská práva k písmu – někdo to třeba i neví ale i fonty podléhají autorským právům proto zjistěte si pod jako licencí je font uvolňěn

Kde hledat fonty?

Spoustu fontů najdete na českém webu České fonty, ze zahraničních pak MyFonts.com, typekit.com a mnoho dalších..

Příklad ke stažení

Zdroje a další informace :

Autor:

Lukáš Pavel

Věnuje se především kódování HTML, CSS, JS, SEO optimalizaci a grafické tvorbě v programu Adobe Photoshop. Pracuje jako externí kódér pro firmy a studuje Design webových aplikací na JČU.

Další články - Web - Sledujte mě na:TwitterFacebookDelicious

Komentáře nejsou povoleny.

Nejvíce Vás zajímá

Poslední komentáře

Facebook

RSS feed

RSS firemniweb.com - blog  - odebírat novinky