Stáhnout standardní fonty dat. Písma společná pro všechny (aktuální) verze Windows a jejich ekvivalenty pro Mac
Tento seznam obsahuje písma společná pro všechny současné operační systémy Windows (ve skutečnosti od Windows 98) a jejich ekvivalenty v Mac OS. Taková písma se někdy nazývají „fonty bezpečné pro prohlížeč“ ( bezpečná písma prohlížeče). Toto je malá referenční kniha, kterou používám při vytváření webových stránek a myslím, že bude užitečná i pro vás.Pokud s webovým designem začínáte, možná si myslíte něco jako: „Proč bych se měl omezovat na tak malou sadu písem? Mám obrovskou sbírku krásných písem!“ Faktem je, že prohlížeč návštěvníka může zobrazit pouze ty fonty, které jsou nainstalovány v jeho operační systém ( Cca. překladatel: V současné době je již možné při návrhu stránek pomocí CSS 3 a jeho nové vlastnosti používat prakticky libovolné fonty @font-face; tuto funkci však zatím nepodporují všechny prohlížeče), což znamená každý návštěvník vaší stránky musí být vlastníkem vámi vybraných písem. Proto byste měli používat pouze písma, která jsou k dispozici v každém operačním systému. Naštěstí má CSS vlastnost @font-family, což tento úkol usnadňuje.
Seznam
@font-family znamená | Okna | Mac | Rodina |
---|---|---|---|
Arial, Helvetica, bezpatkové | Arial | Arial, Helvetica | sans-serif |
"Arial Black", Gadget, bezpatkový | Arial Black | Arial Black, Gadget | sans-serif |
"Comic Sans MS", kurzíva | Comic Sans MS | Comic Sans MS 5 | kurzívní |
"Courier New", Courier, monospace | Kurýr Nový | Courier New, Courier 6 | monoprostor |
Gruzie, Serif | Gruzie 1 | Gruzie | patka |
Impact, dřevěné uhlí, bezpatkové | Dopad | Náraz 5, dřevěné uhlí 6 | sans-serif |
"Lucida Console", Monako, monospace | Konzole Lucida | Monako 5 | monoprostor |
"Lucida Sans Unicode", "Lucida Grande", bezpatkové | Lucida Sans Unicode | Lucida Grandeová | sans-serif |
"Palatino Linotype", "Book Antiqua", Palatino, patka | Palatino linotyp, kniha Antiqua 3 | Palatino 6 | patka |
Tahoma, Ženeva, sans-serif | Tahoma | Ženeva | sans-serif |
"Times New Roman", Times, patka | Times New Roman | Times | patka |
"Trebuchet MS", Helvetica, sans-serif | Trebuchet MS 1 | Helvetica | sans-serif |
Verdana, Ženeva, bezpatkové | Verdana | Verdana, Ženeva | sans-serif |
Symbol | Symbol 2 | Symbol 2 | - |
Webdings | Webovky 2 | Webovky 2 | - |
Wingdings, "Zapf Dingbats" | Wingdings 2 | Zapf Dingbats 2 | - |
"MS Sans Serif", Ženeva, bezpatkový | MS Sans Serif 4 | Ženeva | sans-serif |
"MS Serif", "New York", patka | MS Serif 4 | New York 6 | patka |
1 Písma Georgia a Trebuchet MS se dodávají s Windows 2000/XP a jsou součástí balíku písem IE (a skutečně jsou součástí mnoha aplikací Microsoftu), takže jsou nainstalována na mnoha počítačích s Windows 98.
2 Písma Symbol se zobrazují pouze v Internet Exploreru v jiných prohlížečích jsou obvykle nahrazena standardním písmem (i když např. písmo Symbol se zobrazuje v Opeře a Webdings v Safari).
3 Písmo Book Antiqua je téměř identické s Palatino Linotype; Palatino Linotype je dodáván s Windows 2000/XP a Book Antiqua je dodáván s Windows 98.
4 Upozorňujeme, že tato písma nejsou TrueType, ale bitmapová, takže v některých velikostech mohou vypadat špatně (jsou navržena pro zobrazení v rozlišení 8, 10, 12, 14, 18 a 24 bodů při 96 DPI).
5 Tato písma fungují v Safari pouze ve standardním stylu, ale nefungují tučně nebo kurzívou. Comic Sans MS funguje také tučně, ale ne kurzívou. Zdá se, že ostatní prohlížeče Mac samy o sobě dobře emulují chybějící vlastnosti písma (díky Christianu Fecteauovi za tip).
6 Tato písma se instalují na Mac pouze s klasickou instalací
Snímky obrazovky
- Mac OS X 10.4.8, Firefox 2.0, ClearType povoleno (díky Jurisovi Vecvanagsovi za snímek obrazovky)
- Mac OS X 10.4.4, Firefox 1.5, povoleno ClearType
- Mac OS X 10.4.11, Safari 3.0.4, povoleno ClearType (díky Nolanu Gladiusovi za snímek obrazovky)
- Mac OS X 10.4.4, Safari 2.0.3, ClearType povoleno (díky Eric Zavesky za snímek obrazovky)
- Windows Vista, Internet Explorer 7, povoleno ClearType
- Windows Vista, Firefox 2.0, ClearType povoleno (díky Michielu Bijlovi za snímek obrazovky)
Když začínáte vytvářet rozvržení, musíte v CSS konkrétně specifikovat písma použitá na stránce. Návrhář často v různých fontech píše nejen hlavní text stránky, ale také různé nadpisy, loga a monogramy.
Dobrý návrhář, stejně jako dobrý návrhář rozložení, ví, že prohlížeč může k zobrazení stránky používat pouze ta písma, která jsou nainstalována v počítači uživatele. To znamená, že písma lze rozdělit do dvou kategorií:
- Písma, která bez problémů zobrazí drtivá většina uživatelů.
- Písma, která nemá dost velká skupina uživatelů.
Pokud designér použil fonty druhé kategorie k vytvoření například loga nebo velkých statických nadpisů, nemůžete váhat použít techniku nahrazení textu obrázkem. Nevýhodou použití této techniky je nepružnost. Pokud dojde ke změnám v textu, budete muset obrázek předělat a změnit CSS (například pokud rozměry nového obrázku neodpovídají tomu starému).
Můžeme říci, že nebezpečí použití techniky přímo závisí na pravděpodobnosti změny textu. Proto například obecný text stránky nelze psát nestandardním písmem! Kompetentní designér by tohle nikdy neudělal. A pokud designér na zelené narazí, dobrý designér layoutu je prostě povinen svou chybu napravit – v layoutu vyměnit tento font za co nejpodobnější standardní.
Ale jak lze rozlišit písma první skupiny od druhé? Je jasné, že se nemůžete spolehnout na sadu písem nainstalovaných přímo na vašem počítači! Pojďme na to přijít.
Standardní fonty
Standardní písma jsou sada písem, která se instalují s operačním systémem. Protože se operační systémy liší, liší se i jejich sada písem. Seznam standardních písem pro různé verze Windows naleznete například v článku Standardní písma Windows a seznam standardních písem Mac OS na stránce Písma obsažená v Mac OS. Pokud jde o operační systémy Unix/Linux, nemají jedinou sadu písem. Mnoho uživatelů Linuxu používá sadu písem DejaVu, zejména na Ubuntu jsou nainstalovány ve výchozím nastavení. Podle statistik z http://www.codestyle.org má mnoho uživatelů Unix/Linux nainstalované také sady písem URW, Free a další. Podle stejných statistik má více než 60 % uživatelů Unixu/Linuxu na svém počítači fonty ze sady Core fonts for the Web, která byla do roku 2002 oficiálně zdarma ke stažení na webu Microsoftu.
Aby se stránka zobrazila tak, jak ji návrhář zamýšlel na libovolném operačním systému, je možné ve vlastnosti CSS font-family zadat několik písem oddělených čárkami.
Tato vlastnost určuje prioritní seznam názvů rodin písem a/nebo obecných názvů rodin. Podle specifikace CSS2 existují dva typy názvů rodin písem:
- Název rodiny písem dle vašeho výběru. Například „Times new Roman“, „Arial“ a další. Názvy rodin písem obsahující mezery musí být uzavřeny v uvozovkách. Pokud uvozovky chybí, všechny znaky mezer před a za názvem písma jsou ignorovány a jakákoli sekvence mezer v názvu písma se převede na jedinou mezeru.
- Generická (společná) rodina. Specifikace definuje následující generické rodiny:
- serif - písma s patkami na koncích;
- sans-serif - bezpatková písma;
- kurzíva - kurzíva;
- fantasy - dekorativní písma;
- monospace - jednoprostorové písmo (s písmeny stejné šířky).
Příjmení klanů jsou klíčová slova a není třeba je uzavírat do uvozovek.
Pro návrh se tedy vezme standardní písmo z OS Windows, vybere se podobné pro Mac OS a Unix/Linux, zadá se společná rodina písem a je hotovo.
Ale není to tak jednoduché. Pojďme kopat podrobněji.
Hledáte fonty bezpečné pro web
Na internetu se koncept „bezpečných“ webových písem historicky vyvíjel. Bezpečné písmo je písmo, které je standardní pro všechny operační systémy. Protože o takovém stavu věcí si můžeme nechat jen zdát, neexistují žádná absolutně bezpečná písma!
Některá písma lze s určitými výhradami označit za bezpečná.
Základem pro definování „bezpečných“ písem byla písma nejběžnějšího operačního systému Windows, která se používají i v jiných operačních systémech. Příkladem takového použití jsou již zmíněné Core fonty pro Web font package, který si podle statistik stáhlo mnoho uživatelů Unixu/Linuxu.
Tento balíček obsahuje následující fonty: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Všechny podporují azbuku, která je pro Runet důležitá.
Sada písem, která se standardně dodávají s Mac OS X (tento OS je nejrozšířenější mezi uživateli Mac OS), zahrnuje všechna písma ze sady Core fonts for the Web.
Na základě písem Windows používaných v jiných operačních systémech byl tedy vytvořen následující seznam takzvaných „bezpečných“ webových písem:
- Arial
- Arial Black
- Comic Sans MS
- Kurýr Nový
- Gruzie
- Dopad
- Times New Roman
- Trebuchet čs
- Verdana
Písmo Webdings obsahuje ikony a nelze jej použít pro obsah. Andale Mono se příliš nepoužívá, protože se příliš nehodí pro každodenní čtení obrazovky a ne všichni uživatelé Windows jej mají.
Každý uživatel Windows, Mac OS X a naprostá většina uživatelů Unixu/Linuxu (tj. těch, kteří si nainstalovali Core fonts for the Web package) má všechna tato písma.
Ale co zbytek? Koneckonců chcete, aby plán návrháře vidělo co nejvíce uživatelů!
Fonty podporující azbuku
Specifickou vlastností RuNetu je problém s kódováním stránek a podporou azbuky ve fontech. Aby se vyhnuli problémům s různým kódováním znaků, přišli chytří lidé s Unicode, který umožňuje kombinovat znaky z několika jazyků v jednom písmu. Pro stránky v ruském jazyce tedy musíte používat pouze písma Unicode, která podporují azbuku.
Níže je tabulka korespondence písem.
Okna | Operační Systém Mac | Unix/Linux | rodová rodina |
---|---|---|---|
Arial Black | Helvetica C.Y. | Nimbus Sans L | Bezpatkové |
Arial | Helvetica C.Y. | Nimbus Sans L | Bezpatkové |
Comic Sans MS | Monako CY | * (viz. níže) | kurzívní |
Kurýr Nový | * (viz. níže) | Nimbus Mono L | Jednoprostorový |
Gruzie | * (viz. níže) | Učebnice století L | Serif |
Dopad | Charcoal C.Y. | * (viz. níže) | Bezpatkové |
Times New Roman | Times C.Y. | Nimbus Roman No9 L | Serif |
Trebuchet čs | Helvetica C.Y. | * (viz. níže) | Bezpatkové |
Verdana | Geneva C.Y. | DejaVu Sans | Bezpatkové |
* ve sloupci naproti fontu znamená, že operační systém nemá nativní cyrilické ekvivalenty fontu Windows. Zároveň je ale velká pravděpodobnost, že toto písmo samotné je nainstalováno přímo v operačním systému.
Pokud je například hlavním textem rozvržení Arial, najdeme tento font v tabulce a napíšeme odpovídající řádek v CSS:
tělo ( rodina písem: Arial, "Helvetica CY", "Nimbus Sans L", bezpatkové; )
tělo ( písmo - rodina: Arial, "Helvetica CY", "Nimbus Sans L", bezpatkové; |
Tato položka znamená, že pokud má uživatel písmo Arial (a mají jej všichni uživatelé Windows a všichni uživatelé Mac OS X), stránka se zobrazí v tomto písmu. Pokud uživatel toto písmo nemá, bude stránka rusky mluvícího uživatele Mac OS 9 přesně zobrazena ve standardním systémovém písmu Helvetica CY a pro uživatele Unix/Linux bude zobrazena ve písmu Nimbus Sans L , který je nainstalován na 90 % uživatelů Unix/Linux. Pokud je uživatel Unix/Linux v 10%, které toto písmo nemá, stránka se zobrazí v patkovém písmu, které je standardně nastaveno pro prohlížení webových stránek.
Kromě toho, že tabulka zohledňuje Unix/Linux fonty, je tam po obvyklé Helvetice i nějaká podivná ikona CY. Pojďme zjistit, co to je!
Před vydáním Mac OS X měl tento řádek následující význam: pro uživatele Windows zobrazujeme stránku v Arialu, pro uživatele Mac OS 9 ve standardním fontu Helvetica a pro ostatní vidíme stránku v systému bezpatkové písmo, které je ve výchozím nastavení nakonfigurováno v prohlížeči. Ale opět důležitá nuance! Standardní písmo Mac OS 9 Helvetica nemá azbuku! Pro ruskojazyčnou stránku to znamenalo následující: pro uživatele Windows zobrazujeme stránku Arial, pro uživatele Mac OS 9 - ve standardním fontu Helvetica, který zobrazuje nečitelné informace, a zbytek viz stránku se systémem bezpatkovým font nakonfigurovaný ve výchozím nastavení v prohlížeči.
Pro správné zobrazení této sady pro uživatele Mac OS 9, namísto necyrilizovaného písma Helvetica, má smysl zadat stejný standardní Mac OS 9 font Helvetica CY obsahující azbuku.
Čtení pravítek se od vydání systému Mac OS X změnilo. Nyní je určeno jedno běžné standardní písmo pro Windows/Mac OS X. A pokud chceme, aby uživatelé Mac OS 9 viděli záměr návrháře, musíme do řádku písma zahrnout písmo obsahující azbuku.
I když tedy neexistují žádná bezpečná písma, existují bezpečné rodiny písem. Jsou také tzv zásobníky CSS písem. Kromě standardních písem Windows/Mac OS X mohou tyto řádky obsahovat také ekvivalentní písma ze standardní sady Mac OS 9 (která ve výchozím nastavení neobsahuje „bezpečná“ písma) a běžná písma Unix/Linux.
Každý návrhář rozvržení dříve nebo později narazí na okamžik, kdy návrhář použije písmo v rozvržení, které není zahrnuto v seznamu „bezpečných“ písem; To ale ještě není důvod bít na poplach! Například návrháři velmi často používají na rozvrženích písmo Tahoma, které není v tomto seznamu zahrnuto. Správně postavená řada písem otevírá možnost použití nejen Tahoma, ale i jiných písem. Této příležitosti využívá stále větší počet designérů a kompetentní návrhář dispozičního řešení by o tom měl vědět.
Níže je uvedena dodatečná tabulka písem, která nejsou zahrnuta v seznamu „bezpečných“ písem, ale lze je použít v rozvrženích.
Okna | Operační Systém Mac | rodová rodina |
---|---|---|
Konzole Lucida | Monako | Jednoprostorový |
Lucida Sans Unicode | Lucida Grandeová | Bezpatkové |
Tahoma | Geneva C.Y. | Bezpatkové |
Co když neexistuje žádná azbuka?
Pro anglicky psané texty mají výše uvedené tabulky mírně odlišný vzhled.
Okna | Operační Systém Mac | Unix/Linux | rodová rodina |
---|---|---|---|
Arial Black | Přístroj | Nimbus Sans L | Bezpatkové |
Arial | Helvetica | Nimbus Sans L | Bezpatkové |
Comic Sans MS | Monako | TSCu_Comic | kurzívní |
Kurýr Nový | Kurýr | Nimbus Mono L | Jednoprostorový |
Gruzie | * (viz. níže) | Učebnice století L | Serif |
Dopad | Dřevěné uhlí | Rekha | Bezpatkové |
Times New Roman | Times | Nimbus Roman No9 L | Serif |
Trebuchet čs | Helvetica | Garuda | Bezpatkové |
Verdana | Ženeva | DejaVu Sans | Bezpatkové |
U písem Arial, Courier New a Times New Roman je při vytváření pravítek lepší zadat nejprve písmo Unix/Linux a poté písmo Mac OS. To je způsobeno určitou křivostí sady základních písem Linux X11.
Písma, která nejsou zahrnuta v seznamu „bezpečných“, ale lze je použít v rozvrženích, jsou lépe definována pomocí zásobníků písem CSS založených na této tabulce.
Okna | Operační Systém Mac | Unix/Linux | rodová rodina |
---|---|---|---|
Konzole Lucida | Monako | - | Jednoprostorový |
Lucida Sans Unicode | Lucida Grandeová | Garuda | Bezpatkové |
Palatino linotyp | Palatino | Garuda** | Bezpatkové |
Tahoma | Ženeva | Kalimati | Bezpatkové |
Pomlčka ve sloupci Unix/Linux znamená, že uživatelé těchto operačních systémů s největší pravděpodobností uvidí na stránce výchozí písmo.
** V tomto řádku má smysl umístit písmo Garuda před Palatino (viz vysvětlení výše).
Závěry:
- Neexistují žádná absolutně bezpečná písma. Následující písma lze považovat za podmíněně bezpečná:
- Arial
- Arial Black
- Comic Sans MS
- Kurýr Nový
- Gruzie
- Dopad
- Times New Roman
- Trebuchet čs
- Verdana
- Bezpečné zásobníky CSS, které zohledňují podporu azbuky ve fontech, najdete v článku.
- Pokud na stránce není důležitá podpora azbuky, použijeme zásobníky CSS z článku.
Když začínáte vytvářet rozvržení, musíte v CSS konkrétně specifikovat písma použitá na stránce. Návrhář často v různých fontech píše nejen hlavní text stránky, ale také různé nadpisy, loga a monogramy:
Dobrý návrhář, stejně jako dobrý návrhář rozložení, ví, že prohlížeč může k zobrazení stránky používat pouze ta písma, která jsou nainstalována v počítači uživatele. To znamená, že písma lze rozdělit do dvou kategorií:
- Písma, která bez problémů zobrazí drtivá většina uživatelů.
- Písma, která nemá dost velká skupina uživatelů.
Pokud designér použil fonty druhé kategorie k vytvoření například loga nebo velkých statických nadpisů, nemůžete s technikou váhat. Nevýhodou použití této techniky je nepružnost. Pokud dojde ke změnám v textu, budete muset obrázek předělat a změnit CSS (například pokud rozměry nového obrázku neodpovídají tomu starému).
Můžeme říci, že nebezpečí použití techniky přímo závisí na pravděpodobnosti změny textu. Proto například obecný text stránky nelze psát nestandardním písmem! Kompetentní designér by tohle nikdy neudělal. A pokud designér na zelené narazí, dobrý designér layoutu je prostě povinen svou chybu napravit – v layoutu vyměnit tento font za co nejpodobnější standardní.
Ale jak lze rozlišit písma první skupiny od druhé? Je jasné, že se nemůžete spolehnout na sadu písem nainstalovaných přímo na vašem počítači! Pojďme na to přijít.
Standardní fonty
Standardní písma jsou sada písem, která se instalují s operačním systémem. Protože se operační systémy liší, liší se i jejich sada písem. Seznam standardních písem pro různé verze Windows naleznete například v článku Standardní písma Windows a seznam standardních písem Mac OS na stránce Písma obsažená v Mac OS. Pokud jde o operační systémy Unix/Linux, nemají jedinou sadu písem. Mnoho uživatelů Linuxu používá sadu písem DejaVu, zejména na Ubuntu jsou nainstalovány ve výchozím nastavení. Podle statistik z http://www.codestyle.org má mnoho uživatelů Unix/Linux nainstalované také sady písem URW, Free a další. Podle stejných statistik má více než 60 % uživatelů Unixu/Linuxu na svém počítači fonty ze sady Core fonts for the Web, která byla do roku 2002 oficiálně zdarma ke stažení na webu Microsoftu.
Aby se stránka zobrazila tak, jak zamýšlel návrhář, na jakémkoli operačním systému je možné ve vlastnosti CSS zadat několik písem oddělených čárkami.
Tato vlastnost určuje prioritní seznam názvů rodin písem a/nebo obecných názvů rodin. Podle specifikace CSS2 existují dva typy názvů rodin písem:
- Název rodiny písem dle vašeho výběru. Například "Times new Roman", "Arial" a další. Názvy rodin písem obsahující mezery musí být uzavřeny v uvozovkách. Pokud uvozovky chybí, všechny znaky mezer před a za názvem písma jsou ignorovány a jakákoli sekvence mezer v názvu písma se převede na jedinou mezeru.
- Generická (společná) rodina. Specifikace definuje následující generické rodiny:
- serif - písma s patkami na koncích;
- sans-serif - bezpatková písma;
- kurzíva — kurzíva;
- fantasy - dekorativní písma;
- monospace - jednoprostorové písmo (s písmeny stejné šířky).
Pro návrh se tedy vezme standardní písmo z OS Windows, vybere se podobné pro Mac OS a Unix/Linux, zadá se společná rodina písem a je hotovo.
Ale není to tak jednoduché. Pojďme kopat podrobněji.
Hledáte fonty bezpečné pro web
Na internetu se koncept „bezpečných“ webových písem historicky vyvíjel. Bezpečné písmo je písmo, které je standardní pro všechny operační systémy. Protože o takovém stavu věcí si člověk může nechat jen zdát Neexistují žádná absolutně bezpečná písma!
Některá písma lze s určitými výhradami označit za bezpečná.
Základem pro definování „bezpečných“ písem byla písma nejběžnějšího operačního systému Windows, která se používají i v jiných operačních systémech. Příkladem takového použití jsou již zmíněné Core fonty pro Web font package, který si podle statistik stáhlo mnoho uživatelů Unixu/Linuxu.
Tento balíček obsahuje následující fonty: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Všechny podporují azbuku, která je pro Runet důležitá.
Sada písem, která se standardně dodávají s Mac OS X (tento OS je nejrozšířenější mezi uživateli Mac OS), zahrnuje všechna písma ze sady Core fonts for the Web.
Na základě písem Windows používaných v jiných operačních systémech byl tedy vytvořen následující seznam takzvaných „bezpečných“ webových písem:
- Arial
- Arial Black
- Comic Sans MS
- Kurýr Nový
- Gruzie
- Dopad
- Times New Roman
- Trebuchet čs
- Verdana
Písmo Webdings obsahuje ikony a nelze jej použít pro obsah. Andale Mono se příliš nepoužívá, protože se příliš nehodí pro každodenní čtení obrazovky a ne všichni uživatelé Windows jej mají.
Každý uživatel Windows, Mac OS X a naprostá většina uživatelů Unixu/Linuxu (tj. těch, kteří si nainstalovali Core fonts for the Web package) má všechna tato písma.
Ale co zbytek? Koneckonců chcete, aby plán návrháře vidělo co nejvíce uživatelů!
Přečtěte si o tom v druhé části publikace.
Písma jsou nedílnou a velmi důležitou součástí designu webových stránek a zdůrazňují jejich individualitu. Článek bude hovořit o připojení standardních písem k webové stránce, říká se jim také systémová písma a v příštím článku se podrobně podíváme na výběr a připojení písem z Google Fonts na web WordPress.
Systémová, standardní, bezpečná písma
Jakýkoli prohlížeč zobrazuje pouze písma, která jsou přítomna v operačním systému počítače. Proto se jim říká systémové a instalují se standardně spolu s operačním systémem.
A nazývají se bezpečná písma, protože se pravděpodobně zobrazí v prohlížeči většiny návštěvníků webu.
Problém je ale v tom, že různé operační systémy mají nainstalované různé sady písem. Sady dodávaných písem spolu s operačním systémem si můžete prohlédnout na oficiálních stránkách Windows a Mac OS. A v Unixu/Linuxu neexistuje žádná standardní sada.
Aby se internetová stránka zobrazovala v souladu s představou designéra, byla do CSS nainstalována vlastnost fontu s názvem font-family.
vlastnost font-family
Vlastnost font-family jsou rodiny písem seskupené podle určitých charakteristik.
Generické rodiny:
- serif - písma s patkami na koncích;
- sans-serif - bezpatková písma;
- kurzíva - kurzíva;
- fantasy - dekorativní písma;
- monospace - jednoprostorové písmo (s písmeny stejné šířky).
Tímto způsobem se jednoduše vyberou podobná písma z různých operačních systémů a připojí se k internetové stránce oddělené čárkami.
Zde je příklad, jen pro vizuální vnímání. K tomuto příkladu se vrátíme později, až budeme uvažovat o přímém připojení písem.
Stačí následovat logiku a vše bude křišťálově čisté.
Tělo (rodina písem: Arial, "Helvetica CY", "Nimbus Sans L", bezpatkové; )
Podívejme se, co bylo napsáno:
- OS Windows - Arial;
- OC Mac OS - Helvetica CY;
- OC Unix/Linux - Nimbus Sans L;
- Generická rodina - bezpatková.
Takzvaná bezpečná písma
Na základě OS Windows byl sestaven seznam několika bezpečných písem.
- Arial
- Arial Black
- Comic Sans MS
- Kurýr Nový
- Gruzie
- Dopad
- Times New Roman
- Trebuchet čs
- Verdana
Všechny tyto fonty jsou nainstalovány na Mac OS X, Windows a mnoho uživatelů Unix/Linux, kteří mají nainstalované Core fonty pro webový balíček.
Pro ostatní uživatele je k dispozici srovnávací tabulka. Obsahuje podobná písma patřící do konkrétní rodiny.
Tabulka korespondence a příslušnosti písem ke konkrétní rodině:
Okna | Operační Systém Mac | Unix/Linux | rodová rodina |
---|---|---|---|
Arial Black | Helvetica C.Y. | Nimbus Sans L | Bezpatkové |
Arial | Helvetica C.Y. | Nimbus Sans L | Bezpatkové |
Comic Sans MS | Monako CY | * (viz. níže) | kurzívní |
Kurýr Nový | * (viz. níže) | Nimbus Mono L | Jednoprostorový |
Gruzie | * (viz. níže) | Učebnice století L | Serif |
Dopad | Charcoal C.Y. | * (viz. níže) | Bezpatkové |
Times New Roman | Times C.Y. | Nimbus Roman No9 L | Serif |
Trebuchet čs | Helvetica C.Y. | * (viz. níže) | Bezpatkové |
Verdana | Geneva C.Y. | DejaVu Sans | Bezpatkové |
* Při připojování písem se na to můžete bezpečně spolehnout. Tabulka podporuje znaky azbuky a ruskou abecedu.
Samotnou tabulku jsem vzal v tomto článku.
Připojení systémových písem k webu
Existuje několik způsobů, jak připojit systémová písma k vašemu webu. Kromě toho můžete k různým odstavcům připojit různá písma. Použijte různá písma na jednotlivá slova a fráze. To vše se nyní pokusím zvážit.
Udělejme tedy vše po pořádku.
Propojení písem v souboru CSS
Pokud se potřebujete připojit hlavní písmo pro celý dokument, stačí do šablony stylů přidat následující kód:
Body ( rodina písem: Arial, "Helvetica CY", "Nimbus Sans L", bezpatkové; /* připojit písmo k celému dokumentu */ velikost písma: 16px; /* dodatečně nastavit velikost písma */ písmo -weight: 400 /* nastavte váhu písma nebo místo 400 nastavte hodnotu na normální */ )
Přiřazení fontu nadpisům H1, H2, H3, H4, H5, H6, (zde je to stejné, jen jsme nastavili tučnou hodnotu pro zvýraznění nadpisů):
H1,h2,h3,h4,h5,h6( rodina písem: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* připojte písmo k nadpisům */ váha písma: 600; / * nastavte váhu písma nebo místo 600 nastavte hodnotu na tučné */ )
Písmo přiřazujeme pouze odstavcům:
P( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* připojení písma k odstavcům, lze použít na seznamy li, bloky div, formuláře a další prvky */ váha písma : normal /* nastavte váhu písma nebo místo 600 nastavte hodnotu na tučné */ font-size: 16px /* dodatečně nastavit velikost písma pro odstavce */ )
Na přiřadit písmo pouze ke konkrétnímu odstavci, nebo bloku, musíte nejprve tomuto bloku v dokumentu HTML přiřadit třídu
Zde je odstavec s vlastním písmem
A do tabulky CSS napište následující kód:
Font( rodina písem: Arial, "Helvetica CY", "Nimbus Sans L", bezpatkové; /* písmo spojujeme s určitými odstavci, lze použít na jednotlivé seznamy li, bloky div, formuláře a další prvky */ font-weight: normal /* nastavit váhu písma, nebo místo 600 nastavit hodnotu na tučné */ font-size: 16px /* dodatečně nastavit velikost písma pro odstavce */ )
Nyní bude každé značce - html prvku s třídou .font (nazývejte si ji jak chcete) přiřazeno písmo Arial s normální (400), tučným písmem a velikostí 16 pixelů.
Podobně můžete přiřadit různá písma seznamům li, tabulkám, celým blokům div, jednotlivým slovům nebo frázím.
Připojení písem v dokumentu HTML
Písma jsou zahrnuta přímo do dokumentu HTML stejným způsobem jako soubor CSS, rozdíl je pouze v syntaxi. Písma můžete zahrnout do záhlaví dokumentu – mezi značky
(obdoba CSS souboru), nebo inline – přiřazování vlastností přímo html tagům.Včetně fontů v záhlaví, mezi značkami
. Chcete-li to provést, přidejte do dokumentu html následující kód:
Nebudu se tu opakovat. Vše je podobné připojení v souboru CSS.
Připojování písem inline, přímo k prvkům webu. Dovolte mi uvést několik příkladů:
Připojení písma k odstavci
Zde je odstavec s textem
Samostatné slovo zvýrazníme tučně a přiřadíme samostatný font od hlavního
Zde je odstavec s textem a toto slovo, který by měl být zvýrazněn tučně
Tady je odkaz
Podobně přiřazujeme fonty libovolné html značce.
Ale stále je nejlepší a doporučené přiřazovat styly prvkům prostřednictvím souboru CSS. Za prvé, musíte napsat styly v CSS pouze jednou a poté přiřadit pouze požadovanou třídu v HTML. Za druhé, psaním inline stylů vzniká duplicitní obsah. Zdá se, že tyto vlastnosti a třídy jsou indexovány vyhledávači a slyšel jsem, že W3C chce inline úplně zrušit. I když někdy je snazší psát styly tímto způsobem.
Všechno. Sledujte aktualizace stránek, připravuji článek o připojení nestandardních a originálních písem na stránky, aby se správně zobrazovaly ve všech prohlížečích. Také vám představím několik dobrých služeb, kde si můžete vybrat vlastní písma.