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

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

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

Η επιλογή της σωστής γραμματοσειράς για τον ιστότοπό σας είναι σημαντική!

Η επιλογή γραμματοσειράς είναι σημαντική

Η επιλογή της σωστής γραμματοσειράς έχει τεράστιο αντίκτυπο στο πώς βιώνουν οι αναγνώστες α δικτυακός τόπος.

Η σωστή γραμματοσειρά μπορεί να δημιουργήσει μια ισχυρή ταυτότητα για την επωνυμία σας.

Η χρήση μιας γραμματοσειράς που είναι ευανάγνωστη είναι σημαντική. Η γραμματοσειρά προσθέτει αξία για το κείμενό σας. Είναι επίσης σημαντικό να επιλέξετε το σωστό χρώμα και μέγεθος κειμένου για τη γραμματοσειρά.

Γενικές οικογένειες γραμματοσειρών

Στο CSS υπάρχουν πέντε γενικές οικογένειες γραμματοσειρών:

  1. Οι γραμματοσειρές Serif έχουν μια μικρή διαδρομή στις άκρες κάθε γράμματος. Δημιουργούν μια αίσθηση επισημότητας και κομψότητας.

  2. Οι γραμματοσειρές Sans-serif έχουν καθαρές γραμμές (χωρίς μικρές πινελιές). Δημιουργούν μια μοντέρνα και μινιμαλιστική εμφάνιση.

  3. Γραμματοσειρές Monospace - εδώ όλα τα γράμματα έχουν το ίδιο σταθερό πλάτος. Δημιουργούν μια μηχανική εμφάνιση.

  4. Οι γραμματοσειρές Cursive μιμούνται την ανθρώπινη γραφή.

  5. Οι γραμματοσειρές Fantasy είναι διακοσμητικές/παιχνιδιάρικες γραμματοσειρές.

Όλα τα διαφορετικά ονόματα γραμματοσειρών ανήκουν σε μία από τις γενικές οικογένειες γραμματοσειρών.

Διαφορά μεταξύ γραμματοσειρών Serif και Sans-serif

Σημείωση: Στις οθόνες υπολογιστών, οι γραμματοσειρές sans-serif θεωρούνται πιο ευανάγνωστες από τις γραμματοσειρές serif.

Μερικά παραδείγματα γραμματοσειρών

Generic Font Family Examples of Font Names
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

Η ιδιότητα της οικογένειας γραμματοσειρών CSS

Στο CSS, χρησιμοποιούμε την ιδιότητα font-family για να καθορίσουμε τη γραμματοσειρά ενός κειμένου.

Σημείωση: Εάν το όνομα της γραμματοσειράς είναι περισσότερες από μία λέξεις, πρέπει να είναι μέσα σε εισαγωγικά, όπως: "Times New Roman".

Συμβουλή: Η ιδιότητα font-family θα πρέπει να περιέχει πολλά ονόματα γραμματοσειρών ως "εναλλακτικό" σύστημα, για τη διασφάλιση της μέγιστης συμβατότητας μεταξύ προγραμμάτων περιήγησης/λειτουργικών συστημάτων. Ξεκινήστε με τη γραμματοσειρά που θέλετε και τελειώστε με μια γενική οικογένεια (να αφήσει το πρόγραμμα περιήγησης επιλέξτε μια παρόμοια γραμματοσειρά στη γενική οικογένεια, εάν δεν υπάρχουν άλλες γραμματοσειρές διαθέσιμος). Τα ονόματα των γραμματοσειρών πρέπει να διαχωρίζονται με κόμμα. Διαβάστε περισσότερα για εναλλακτικές γραμματοσειρές στο επόμενο κεφάλαιο.

Παράδειγμα

Καθορίστε μερικές διαφορετικές γραμματοσειρές για τρεις παραγράφους:

 .p1 {
  font-family: "Times New Roman", Times, serif;
}

  .p2 {
  font-family: Arial, Helvetica, sans-serif;
}

  .p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>