Fontes CSS seguras da Web
Fontes seguras da web são fontes instaladas em todos os navegadores.
Temos três fontes no código 1ª 2ª 3ª. São backup 2ª 3ª, em caso o
navegador não encontre suporte para a 1ª.
Na prática
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>FONTES ALTERNATIVA</h1>
<p>Primeiro paragráfo.</p>
<p>Segundo paragráfo.</p>
</body>
</html>
Lista das melhores fontes segura para web.
- Arial (sem serifa)
- Verdana (sem serifa)
- Tahoma (sem serifa)
- Trebuchet MS (sem serifa)
- Times New Roman (serif)
- Geórgia (serifa)
- Garamond (serifa)
- Courier New (monoespacial)
- Brush Script MT (cursiva)
Arial (sem serifa)
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Título da página</h1>
<p>Primeira página </p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Verdana (sem serifa)
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Verdana,
sans-serif;
}
</style>
</head>
<body>
<h1>Título da página</h1>
<p>Primeira página da web. </p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Tahoma (sem serifa)
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Tahoma, sans-serif;
}
</style>
</head>
<body>
<h1>Título da página</h1>
<p>primeira página da web. </p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Trebuchet MS (sem serifa)
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Trebuchet MS',
sans-serif;
}
</style>
</head>
<body>
<h1>Título da página</h1>
<p>Primeira página da web. </p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Times New Roman (serif)
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Times New Roman',
serif;
}
</style>
</head>
<body>
<h1>Título da página</h1>
<p>Primeira página da web. </p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Geórgia (serifa)
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<h1>Título da página</h1>
<p>Primeira página da web. </p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Garamond (serifa)
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Garamond, serif;
}
</style>
</head>
<body>
<h1>Título da página</h1>
<p>Primeira página da web.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Courier New (monoespacial)
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Courier New',
monospace;
}
</style>
</head>
<body>
<h1>Título da página</h1>
<p>Primeira página da web. </p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Brush Script MT (cursiva)
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Brush Script MT',
cursive;
}
</style>
</head>
<body>
<h1>Título da página</h1>
<p>Primeira página da web. </p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>