CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

Webová bezpečná písma CSS


Co jsou webová bezpečná písma?

Webová bezpečná písma jsou písma, která jsou univerzálně nainstalována ve všech prohlížečích a zařízeních.


Záložní písma

Neexistují však žádná 100% zcela bezpečná písma pro web. Vždy existuje možnost, že písmo nebude nalezeno nebo není správně nainstalováno.

Proto je velmi důležité vždy používat záložní písma.

To znamená, že byste měli do font-family vlastnosti přidat seznam podobných „záložních písem“. Pokud první písmo nefunguje, prohlížeč zkusí další, další a tak dále. Seznam vždy ukončete obecným názvem rodiny písem.

Příklad

Zde jsou tři typy písem: Tahoma, Verdana a bezpatkové. Druhý a třetí font jsou zálohy pro případ, že by první nebylo nalezeno.

p {
font-family: Tahoma, Verdana, sans-serif;
}

Nejlepší webová bezpečná písma pro HTML a CSS

Následující seznam obsahuje nejlepší webová bezpečná písma pro HTML a CSS:

  • Arial (sans-serif)
  • Verdana (sans serif)
  • Helvetica (sans-serif)
  • Tahoma (sans serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (patkové)
  • Gruzie (patka)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (kurziva)

Poznámka: Než svůj web publikujete, vždy zkontrolujte, jak se vaše písma zobrazují v různých prohlížečích a zařízeních, a vždy používejte záložní písma!



Arial (sans-serif)

Arial je nejrozšířenější písmo pro online i tištěná média. Arial je také výchozí písmo v Dokumentech Google.

Arial je jedním z nejbezpečnějších webových písem a je k dispozici ve všech hlavních operačních systémech.

Příklad

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Verdana (sans serif)

Verdana je velmi oblíbené písmo. Verdana je snadno čitelná i pro malé velikosti písma.

Příklad

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Helvetica (sans-serif)

Písmo Helvetica milují designéři. Je vhodný pro mnoho druhů podnikání.

Příklad

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Tahoma (sans serif)

Písmo Tahoma má mezi znaky méně místa.

Příklad

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Trebuchet MS (sans-serif)

Trebuchet MS byl navržen společností Microsoft v roce 1996. Používejte toto písmo opatrně. Není podporováno všemi mobilními operačními systémy.

Příklad

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Times New Roman (patkové)

Times New Roman je jedním z nejznámějších písem na světě. Vypadá profesionálně a používá se v mnoha novinách a „zpravodajských“ webech. Je to také primární písmo pro zařízení a aplikace Windows.

Příklad

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Gruzie (patka)

Georgia je elegantní patkové písmo. Je velmi dobře čitelný při různých velikostech písma, takže je dobrým kandidátem na mobilní design.

Příklad

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Garamond (serif)

Garamond je klasické písmo používané pro mnoho tištěných knih. Má nadčasový vzhled a dobrou čitelnost.

Příklad

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Courier New (monospace)

Courier New je nejrozšířenější jednoprostorové patkové písmo. Courier New se často používá u kódovacích displejů a mnoho poskytovatelů e-mailu jej používá jako výchozí písmo. Courier New je také standardní písmo pro filmové scénáře.

Příklad

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Brush Script MT (kurziva)

Písmo Brush Script MT bylo navrženo tak, aby napodobovalo rukopis. Je elegantní a sofistikovaný, ale může být obtížně čitelný. Používejte jej opatrně.

Příklad

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Tip: Podívejte se také na všechna dostupná písma Google a na to, jak je používat.