Γράμμα CSS

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

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

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

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

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

Κοινές ομάδες γραμματοσειρών

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

  • Γραμματοσειρές με κεραία (Serif) - σε κάθε γράμμα υπάρχει μια μικρή πινελιά στο περιθώριο. Δημιουργούν μια αίσθηση μορφοποίησης και ευαισθησίας.
  • Γραμματοσειρές χωρίς κεραία (Sans-serif) - οι γραμμές των γραμματοσειρών είναι απλές (χωρίς μικρά χρώματα). Δημιουργούν μια μοντέρνα και απλή όψη.
  • Σταθεροπλάτη γραμματοσειρές (Monospace) - όλοι οι χαρακτήρες έχουν την ίδια σταθερή πλάτος. Δημιουργούν ένα μηχανικό όψη.
  • Καλλιγραφικές γραμματοσειρές (Cursive) - μιμείται την γραφή του ανθρώπου.
  • Φανταστικές γραμματοσειρές (Fantasy) - είναι διακοσμητικές/ελαφρώς αστείες γραμματοσειρές.

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

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

Σερίφις κατά Σανσαρίφις

Συμβουλή:Στο υπολογιστή, οι γραμματοσειρές χωρίς κεραία θεωρούνται πιο εύκολες στη ανάγνωση από τις γραμματοσειρές με κεραία.

Παραδείγματα γραμματοσειρών

Κοινές ομάδες γραμματοσειρών Παράδειγμα ονόματος γραμματοσειράς
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

Η ιδιότητα font-family της CSS

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

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

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

Παράδειγμα

Διευκρινίζεται η χρήση διαφορετικών γραμματοσειρών για τρεις παραγράφους:

.p1 {
  font-family: "Times New Roman", Times, serif;
}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Δοκιμάστε το προσωπικά