Libovolné fonty v CSS
použití pravidla @font-face
Problém neznámého písma - Co je potřeba - Jak získám ttf font - CSS zápis vložení ttf fontu
Tato stránka vznikla původně jako návod na použití eot fontů s programem Weft. Protože tento postup je hrubě neaktuální, zaktualizoval jsem ji v roce 2015 na použití ttf fontů.
Problém neznámého písma
Když děláte stránky, tak nemůžete používat zvláštní písma, protože na počítači nebo mobilu u čtenáře nemusejí být nainstalovaná. Dříve to vedlo k nutnosti omezit se na několik málo tradičních písem, které byly na všech windows. Dnes (2015) toto omezení trvá, například protože na applu nejsou windowsí fonty a naopak.
To je určité omezení. Nabízí se otázka, proč se nedá neznámé použité písmo ve chvíli, kdy je potřeba, odněkud stáhnout? Odpověď je taková, že to jde, ale používá se to málo, protože se to moc neví.
Microsoft kdysi dávno při uvádění prohlížeče IE 4.0 ohlásil možnost stahování písem v souborech typu *.eot. Takovým dynamickým písmům se anglicky říká "embed fonts", což znamená něco jako "vestavěná písma". Byla to ale děsná otrava a fungovalo to jenom v Exploreru.
Postupem času si naštěstí tvůrci prohlížečů uvědomili, že je nepraktické nutit lidi transformovat písma do eot a jiných podivných formátů, když se většina písem na počítačích používá v souborech ttf (true type font). Proto je přibližně od roku 2013 možno používat ve stránkách fonty, které se načtou ze serveru ve formě souboru ttf.
Kromě ttf (případně otf) existují formáty woff, foww2 a svg, ale proč se s nimi trápit, když ttf funguje. Jediná výhoda woff a woff2 fontů je menší datová velikost.
Co je potřeba
- ten neobvyklý font ve formě ttf.
- základní znalost CSS a práce se soubory
A dělá se to zápisem s @font-face {}.
Jak získám ttf font
- Buďto se dá někde stáhnout,
- nebo se dá najít ve Windows. Ve většině Windows se fonty myslím nalézají v adresáři c:\windows\fonts nebo tam někde.
Tento soubor s fontem má příponu .ttf. Umístím ji někam do svého webu a stránky na font odkazuji.
(U odněkud stažených fontů je asi dobré popřemýšlet, jestli je možné volné použití takového fontu, nebo jestli je potřeba koupit licence.)
Bacha na češtinu
U ttf fontu se ujistěte, že podporuje české znaky. Je spousta fontů, které češtinu nepodporují. Podporu češtiny ze specifikace fontu poznáte tak, že podporuje kódovou stránku 1250 Latin 2.
CSS zápis vložení ttf fontů
I když denně pracujete s kaskádovými styly (CSS), možná vás zápis dynamického fontu do HTML/CSS pomocí @font-face { } trochu překvapí.
Stylopis má podobu:
<style>
@font-face {
font-family: jmeno_fontu;
src: url('mujfont.ttf');
}
</style>
V HTML textu se potom font zapisuje normálně vlastností font-family, akorát se může použít to moje jmeno_fontu, zadané výše. Např.
<p style="font-family: jmeno_fontu">Odstavec zvláštním písmem</p>
Prohlížeč potom písmo vykresluje podle definice ze souboru mujfont.ttf. Adresa může být zadána relativně (jako v tomto příkladu) nebo absolutně (http://example.com/.../mujfont.ttf).
Jako jmeno_fontu je možné zvolit jakýkoliv řetězec. Já s oblibou používám název, který je odvozený od názvu fontu, ale není zcela totožný. Kdyby byl totožný, tak se totiž obávám, aby prohlížeč font zbytečně nestahoval, pokud má font s původním jménem nainstalovaný. Příklad:
@font-face {
font-family: segoeprMoje;
src: url('segoepr.ttf');
}
body {
font-family: "Segoe Print", segoeprMoje",
sans-serif;
}
V příkladu jsem si vymyslel název fontu segoeprMoje a přílinkoval k němu soubor segoepr.ttf, což je windowsí font segoepr.ttf. Potom tento název segoeprMoje můžu používat v zápisu vlastnosti font-family jako normální jméno fontu. Zápis "Segoe Print" ale používám na začátku, protože po něm sáhnou všechny windowsácké prohlížeče, neboť tento font na většině Windows nainstalovaný už je. Pak se nemusí nic stahovat.
Reklama
