Style Sheets Ιστού
Συμβουλές & κόλπα CSS

(Αυτή η σελίδα χρησιμοποιεί CSS style sheets)

Το παρόν έγγραφο είναι μετάφραση του άρθρου «Cascading Style Sheets. CSS tips & tricks».
Αυθεντική εκδοχή του εγγράφου βρίσκεται μόνο στην ιστοσελίδα W3C www.w3.org/Style/Examples/007/fonts
Η παρούσα μετάφραση ΔΕΝ είναι επίσημο έγγραφο της W3C.
Όλα τα κοπιράιτ ανήκουν στη W3C.
Το παρόν έγγραφο μπορεί να έχει λάθη της μετάφρασης και εσφαλμένη εκτύπωση.
Συγγραφέας: Dimitris Papadopoulos
Το έγγραφο μεταφράστηκε με υποστήριξη: ιστοσελιδα

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

Διαμόρφωση γραμματοσειρών

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

Μετά το χρώμα η γραμματοσειρά είναι το βασικότερο χαρακτηριστικό σελίδας. Στην σελίδα αυτή δεν θα σας δείξω κανένα “κόλπο”, αλλά θα παρουσιάσω τη σειρά των παραλλαγών γραμματοσειρών που επιτρέπει το CSS.

Δεδομένου ότι δεν είναι όλες οι γραμματοσειρές διαθέσιμες σε όλους τους υπολογιστές (υπάρχουν χιλιάδες γραμματοσειρές, και οι περισσότερες δεν είναι δωρεάν), CSS παρέχει ένα σύστημα επιφυλάξεων. Βάζετε πρώτα την γραμματοσειρά που θέλετε, κατόπιν οποιεσδήποτε γραμματοσειρές που θα γεμίσουν την σελίδα εάν η πρώτη είναι μη διαθέσιμη, και πρέπει να τελειώσετε τον κατάλογο με μια γενική γραμματοσειρά, από τις πέντε που υπάρχουν: serif, sans-serif, monospace, cursive και fantasy.

Ο ακόλουθος πίνακας παρουσιάζει παραδείγματα των διάφορων γραμματοσειρών (ο πλοηγός σας μπορεί να μην τις ξέρει όλες) και μπορείτε να δείτε τι ο πλοηγός σας κάνει με κάθε μία από τις πέντε γενικές:

'sans-serif': κανονικές γραμματοσειρές χωρίς πατούρες
Arial, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Helvetica, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Gill Sans, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Lucida, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Helvetica Narrow, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
'serif': κανονικές γραμματοσειρές με πατούρες
Times, serif The Quick Brown Fox Jumps Over The Lazy Dog
Times New Roman, serif The Quick Brown Fox Jumps Over The Lazy Dog
Palatino, serif The Quick Brown Fox Jumps Over The Lazy Dog
Bookman, serif The Quick Brown Fox Jumps Over The Lazy Dog
New Century Schoolbook, serif The Quick Brown Fox Jumps Over The Lazy Dog
serif The Quick Brown Fox Jumps Over The Lazy Dog
'monospace': γραμματοσειρές καθορισμένου πλάτους
Andale Mono, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Courier New, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Courier, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Lucidatypewriter, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Fixed, monospace The Quick Brown Fox Jumps Over The Lazy Dog
monospace The Quick Brown Fox Jumps Over The Lazy Dog
'cursive': γραμματοσειρές που παριστάνουν χειρόγραφες
Comic Sans, Comic Sans MS, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Zapf Chancery, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Coronetscript, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Florence, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Parkavenue, cursive The Quick Brown Fox Jumps Over The Lazy Dog
cursive The Quick Brown Fox Jumps Over The Lazy Dog
'fantasy': διακοσμητικές γραμματοσειρές, για τίτλους κλπ
Impact, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Arnoldboecklin, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Oldtown, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Blippo, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Brushstroke, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
fantasy The Quick Brown Fox Jumps Over The Lazy Dog

Διαμόρφωση γραμματοσειρών

Οι περισσότερες γραμματοσειρές έχουν τις διάφορες μορφές μέσα στην ίδια οικογένεια, τυπικά έντονη και πλάγια, συχνά επίσης μια έντονη πλάγια μορφή, κάπως λιγότερο συχνά μικρο-κεφαλαία και παρα πολύ σπάνια υπερελαφριά/υπερέντονη ή τεντωμένη/συμπυκνωμένη εκδόση.

Ο πίνακας παρακάτω παρουσιάζει διάφορες διαφορετικές μορφές. Εκτός αν έχετε μια πολύ πλούσια συλλογή των πηγών, πολλές από τις σειρές θα είναι οι ίδιες.

κανόνας serif sans-serif
Μορφές
font-style: normal The Quick… The Quick…
font-style: italic The Quick… The Quick…
font-style: oblique The Quick… The Quick…
Βάρος
font-weight: 100 The Quick… The Quick…
font-weight: 200 The Quick… The Quick…
font-weight: 300 The Quick… The Quick…
font-weight: normal The Quick… The Quick…
font-weight: 500 The Quick… The Quick…
font-weight: 600 The Quick… The Quick…
font-weight: bold The Quick… The Quick…
font-weight: 800 The Quick… The Quick…
font-weight: 900 The Quick… The Quick…
Εκδοχές
font-variant: normal The Quick… The Quick…
font-variant: small-caps The Quick… The Quick…
Τράβιγμα
font-stretch: ultra-condensed The Quick… The Quick…
font-stretch: extra-condensed The Quick… The Quick…
font-stretch: condensed The Quick… The Quick…
font-stretch: semi-condensed The Quick… The Quick…
font-stretch: normal The Quick… The Quick…
font-stretch: semi-expanded The Quick… The Quick…
font-stretch: expanded The Quick… The Quick…
font-stretch: extra-expanded The Quick… The Quick…
font-stretch: ultra-expanded The Quick… The Quick…

Στο CSS3 υπάρχει μια ακόμα διαμόρφωση διαθέσιμη: 'font-effect' κάνει τα γράμματα να φανούν χαραγμένες ή αποτυπωμένες σε ανάγλυφο.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Δημιουργία 17 Jan 2001;
Τελευταία ανανέωση $Date: 2008/01/11 18:26:30 $ GMT