Webová bezpečná písma jsou písma, která jsou univerzálně nainstalována ve všech prohlížečích a zařízeních.
Neexistují však žádná 100% zcela bezpečná písma pro web. Vždy existuje a možnost, že písmo nebylo 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 přidat seznam podobných „záložních písem“. rodinu písem vlastnictví. Pokud první písmo nefunguje, prohlížeč zkusí další a další atd. Seznam vždy ukončete obecným názvem rodiny písem.
Zde jsou tři typy písem: Tahoma, Verdana a sans-serif. Druhé a třetí písmo jsou zálohy pro případ, že by první nebylo nalezeno.
p {
font-family: Tahoma, Verdana, sans-serif;
}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>CSS Fallback Fonts</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Následující seznam obsahuje nejlepší webová bezpečná písma pro HTML a CSS:
Poznámka: Než své webové stránky zveřejníte, vždy zkontrolujte, jak jsou vaše písma se zobrazují v různých prohlížečích a zařízeních a vždy se používají záložní fonty!
Arial je nejpoužívaně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.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Verdana je velmi oblíbené písmo. Verdana je snadno čitelná i pro malé velikosti písma.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Písmo Tahoma má mezi znaky méně místa.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Tahoma, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Trebuchet MS byl navržen společností Microsoft v roce 1996. Používejte toto písmo opatrně. Ne podporovány všemi mobilními operačními systémy.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Times New Roman je jedním z nejznámějších písem na světě. To vypadá profesionální a používá se v mnoha novinách a „zpravodajských“ webech. To je také primární písmo pro zařízení a aplikace Windows.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Times New Roman', serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
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.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Garamond je klasické písmo používané pro mnoho tištěných knih. Má nadčasový vzhled a dobrá čitelnost.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Garamond, serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Courier New je nejrozšířenější jednoprostorové patkové písmo. Courier New se často používá u kódovacích displejů a mnoha poskytovatelů e-mailu použít jako výchozí písmo. Courier New je také standardní písmo pro film scénáře.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Courier New', monospace;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
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ě.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Brush Script MT', cursive;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Tip: Podívejte se také na všechna dostupná písma Google a na to, jak je používat.