Δραστηριότητες
Τεχνκές εκθέσεις
Περιεχόμενα ιστοσελίδας
Μεταφράσεις
Προγράμματα
Αναζήτηση
Δίπλα:
Style
CSS
συμβουλές και κόλπα
Bert BosΔημιουργία 17 Jan 2001;
Τελευταία ανανέωση $Date: 2008/01/11 18:26:30 $ GMT
(Αυτή η σελίδα χρησιμοποιεί 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' κάνει τα γράμματα να φανούν χαραγμένες ή αποτυπωμένες σε ανάγλυφο.
Δραστηριότητες
Τεχνκές εκθέσεις
Περιεχόμενα ιστοσελίδας
Μεταφράσεις
Προγράμματα
Αναζήτηση
Δίπλα:
Style
CSS
συμβουλές και κόλπα
Bert Bos