CSS παρέχει πολλές ιδιότητες για την προσαρμογή της εμφάνισης των γραμμάτων. Αυτές περιλαμβάνουν τον τύπο γραμματοσειράς, το στυλ γραμματοσειράς και τις σκιές.
Μεταξύ των ιδιοτήτων γραμματοσειράς CSS, συμπεριλαμβάνονται πληροφορίες για τον τύπο γραμματοσειράς, το στυλ γραμματοσειράς και το βάρος της γραμματοσειράς. Αυτές οι ιδιότητες είναι φυσικά χρήσιμες κυρίως για τα στοιχεία HTML στα οποία περιέχεται κείμενο (p, i κτλ.). Μπορούν όμως επίσης να χρησιμοποιηθούν και σε πίνακες.
Με το font-family μπορείτε να καθορίσετε τον τύπο γραμματοσειράς που θα χρησιμοποιηθεί.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>Το αποτέλεσμα στο πρόγραμμα περιήγησης εμφανίζεται ως εξής:
Τυπικοί τύποι γραμματοσειρών είναι για παράδειγμα τα Arial, Helvetica και Times Roman. Η ιδιότητα CSS font-family ορίζει τις επιθυμητές γραμματοσειρές. Όταν προσδιορίζετε περισσότερες από μια γραμματοσειρές, η σειρά έχει σημασία. Εάν η πρώτη γραμματοσειρά που αναφέρθηκε είναι διαθέσιμη, τότε χρησιμοποιείται αυτή. Οι επιθυμητές γραμματοσειρές διαχωρίζονται με κόμμα μεταξύ τους. Ως τελευταία οδηγία συνήθως σημειώνεστε μια γενική οικογένεια γραμματοσειράς. Μέσω μιας τέτοιας γενικής οικογένειας δίνεις στους περιηγητές το πεδίο να επιλέξουν μια γραμματοσειρά φανερά παρόμοια με αυτή που έχει προσδιοριστεί.
• serif = μια γραμματοσειρά με σιρφ
• sans-serif = μια γραμματοσειρά χωρίς σιρφ
• cursive = μια γραμματοσειρά για πλάγια γραφή
• fantasy = μια γραμματοσειρά για ασυνήθιστη γραφή
• monospace = μια γραμματοσειρά με ίση πάχυνση χαρακτήρων.
Το στυλ γραμματοσειράς
Με την ιδιότητα font-style μπορείτε να ορίσετε το στυλ γραμματοσειράς σας. Εάν το επιτρέπει η επιλεγμένη γραμματοσειρά, μπορείτε να επιβάλετε έντονη γραφή με την τιμή italic.
Άλλες γραμματοσειρές μπορούν να γίνουν κλίση με τη χρήση του oblique.
Η επόμενη ιδιότητα CSS που επηρεάζει την εμφάνιση της γραμματοσειράς ονομάζεται font-variant. Μέσω αυτής, μπορούν να οριστούν οι λεγόμενες μικρόκεφαλες.
Για να ορίσετε τις μικρόκεφαλες, αναθέτετε στο font-variant την τιμή small-caps.
Το μέγεθος γραμματοσειράς
Πολύ σημαντική είναι επίσης η δήλωση του μεγέθους της γραμματοσειράς. Η CSS παρέχει γι' αυτό την ιδιότητα font-size. Τα μεγέθη γραμματοσειρών μπορούν να δηλωθούν σε πλήθος διαφορετικών μονάδων.
• EM
• REM
• Πίξελ
• Ποσοστό
• Λέξεις-κλειδιά
Ως λέξεις-κλειδιά, έχεις τις ακόλουθες επιλογές:
• xx-small – πολύ, πολύ μικρό
• x-small – πολύ μικρό
• small – μικρό
• smaller – μικρότερο από τον γονέα
• medium – μεσαίο
• large – μεγάλο
• x-large – πολύ μεγάλο
• xx-large – πολύ, πολύ μεγάλο
• larger – μεγαλύτερο από τον γονέα
Εδώ ένα παράδειγμα πώς να οριστεί το μέγεθος της γραμματοσειράς:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}Και έτσι φαίνεται στον περιηγητή:
Παρακαλώ σημειώστε ότι η καθορισμός μεγέθους γραμματοσειράς είναι πολύπλοκο θέμα, καθώς οι διάφορες μονάδες έχουν αντίστοιχα πλεονεκτήματα και μειονεκτήματα. Για μια καλή επισκόπηση ποιάς μονάδας να χρησιμοποιήσετε, επισκεφθείτε τη σελίδα http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Για όσους δεν θέλουν να το διαβάσουν: Χρησιμοποιήστε σχετικές τιμές όπως το em για την προβολή στην οθόνη. Για τη διάταξη εκτύπωσης, στηρίξτε στις απόλυτες μονάδες όπως το pt.
Το βάρος της γραμματοσειράς
Συνεχίζουμε με το λεγόμενο βάρος της γραμματοσειράς. Έτσι καθορίζετε το πάχος και τη δύναμη μιας γραμματοσειράς. Γι' αυτό χρησιμοποιείται η ιδιότητα font-weight.
.fett {
font-weight:bold;
}
Με αυτήν τη σύνταξη, το κείμενο που διακρίνεται έτσι εμφανίζεται με έντονη γραφή.
Οι πιθανοί τύποι είναι bold (έντονη), bolder (εξαιρετικά έντονη), lighter (λεπτή) και normal. Επιπλέον, επιτρέπονται οι αριθμητικές τιμές 100, 200, 300, 400, 500, 600, 700, 800 και 900. Αυτές κινούνται από εξαιρετικά λεπτό (100) έως εξαιρετικά έντονο (900).
Συνοψίζοντας τους ορισμούς
Στο πλαίσιο των ορισμών γραμματοσειρών, επίσης σημαντικό ρόλο παίζει η ιδιότητα line-height, με την οποία καθορίζεται η ύψος γραμμής. Θα επανέλθω λεπτομερέστερα σε αυτήν την ιδιότητα αργότερα. Σε αυτό το σημείο πρέπει να αναφερθεί απλώς, καθώς παίζει έναν σημαντικό ρόλο σε σχέση με την ιδιότητα font που εμφανίζεται αμέσως μετά.
Μπορείτε να συνδυάσετε τις προαναφερθείσες πληροφορίες σχετικά με την εμφάνιση γραμμάτων. Για το σκοπό αυτό χρησιμοποιείται η γενική ιδιότητα font. Αυτή περιλαμβάνει τις ακόλουθες μεμονωμένες πληροφορίες ή τις συμπεριλαμβάνει.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Με το font μπορείτε να συνδυάσετε διάφορες μορφοποιήσεις γραμμάτων. Μπορείτε να αναφέρετε τις προηγουμένως αναφερθείσες ιδιότητες, αλλά δεν είναι υποχρεωτικό να χρησιμοποιήσετε όλες. Απαραίτητες όμως είναι οι ιδιότητες για το μέγεθος γραμματοσειράς και την οικογένεια γραμματοσειράς.
Χάρη στη συντόμευση μπορείτε να κρατήσετε τα αρχεία CSS πιο σύντομα και πιο ευανάγνωστα.
Η σειρά που παρουσιάζεται παρακάτω πρέπει να τηρηθεί. Όταν αναφέρονται οι δύο ιδιότητες font-size και line-height, αυτές διαχωρίζονται με ένα κάθετο. Σε περίπτωση που αναφέρεται απλώς ένας αριθμός, αυτός αντιστοιχεί στο font-size.
Ένα παράδειγμα:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust έχει αναπτυχθεί για να μπορείτε να προβάλλετε γραμματοσειρές που είναι περίπου ίδιου μεγέθους. Διαφορετικές γραμματοσειρές με την ίδια ύψος γραμματοσειράς έχουν διαφορετικό ύψος x. Ωστόσο, οι γραμματοσειρές με μεγαλύτερο ύψος x είναι πιο ευανάγνωστες. Έτσι, μπορεί να συμβεί ότι ένα έγγραφο γίνεται δυσανάγνωστο όταν η αρχική γραμματοσειρά λείπει και αντικαθίσταται με μία με μικρότερο ύψος x. Με το font-size-adjust πρέπει να μπορεί να γίνει αυτή η διαφορά.
Ένα παράδειγμα:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
Στο επόμενο εκπαιδευτικό μάθημα θα μάθετε περισσότερες επιλογές με τις οποίες μπορείτε να προσαρμόσετε την εμφάνιση κειμένου στην ιστοσελίδα σας.
