Εναλλακτικές γραμματοσειρές CSS

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Εναλλακτικές γραμματοσειρές που χρησιμοποιούνται συνήθως

Ακολουθούν ορισμένες εναλλακτικές γραμματοσειρές που χρησιμοποιούνται συνήθως, οργανωμένες από τις 5 γενικές οικογένειες γραμματοσειρών:

Serif
Sans-serif
Monospace
Cursive
Fantasy

  • Σερίφ

  • Sans-serif

  • Monospace

  • Διαγράμματα

  • Φαντασία

Γραμματοσειρές Serif

font-family Example text
"Times New Roman", Times, serif

This is a Heading

This is a paragraph.

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: "Times New Roman", Times, 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>
font-family Example text
Georgia, serif

This is a Heading

This is a paragraph.

Δοκίμασέ το

<!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>
font-family Example text
Garamond, serif

This is a Heading

This is a paragraph.

Δοκίμασέ το

<!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>

Γραμματοσειρές Sans-Serif

font-family Example text
Arial, Helvetica, sans-serif

This is a Heading

This is a paragraph.

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Arial, Helvetica, 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>
font-family Example text
Tahoma, Verdana, sans-serif

This is a Heading

This is a paragraph.

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Tahoma, 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>
font-family Example text
"Trebuchet MS", Helvetica, sans-serif

This is a Heading

This is a paragraph.

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: "Trebuchet MS", Helvetica, 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>
font-family Example text
Geneva, Verdana, sans-serif

This is a Heading

This is a paragraph.

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Geneva, 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>

Γραμματοσειρές Monospace

font-family Example text
"Courier New", Courier, monospace

This is a Heading

This is a paragraph.

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: "Courier New", Courier, 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>

Γραμματοσειρές

font-family Example text
"Brush Script MT", cursive

This is a Heading

This is a paragraph.

Δοκίμασέ το

<!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>

Γραμματοσειρές φαντασίας

font-family Example text
Copperplate, Papyrus, fantasy

This is a Heading

This is a paragraph.

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Copperplate, Papyrus, fantasy;
}
</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>

Συμβουλή: Δείτε επίσης όλες τις διαθέσιμες γραμματοσειρές Google και τον τρόπο χρήσης τους.