Γραμματοσειρές και στιλ
Μπορείτε να εισάγετε μία ή περισσότερες γραμματοσειρές στο έγγραφο με τους εξής παρακάτω τρόπους:
Γραμματοσειρά από το μηχάνημα του επισκέπτη (Local font)
Στην περίπτωση αυτή γράφουμε:
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', Arial, sans-serif;
Βασική προϋπόθεση είναι ότι οι γραμματοσειρές θα είναι εγκαταστημένες στο μηχάνημα του χρήστη. Ή έστω κάποια από αυτές, διαφορετικά θα χρησιμοποιηθεί μια sans-serif ή μια serif.
Γραμματοσειρά από server της google
Στην περίπτωση αυτή γράφουμε τις παρακάτω εντολές στο τμήμα head του εγγράφου html.
<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600&display=swap" rel="stylesheet">
Επίσης μπορούμε να εισάγουμε τη γραμματοσειρά με την εντολή (rule) @import
από ένα αρχείο css.
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600&display=swap');
Γραμματοσειρά από τον server μας
Μπορούμε να τοποθετήσουμε τη γραμμοτοσειρά στον δικό μας server σε κάποιον φάκελο και να την καλούμε απο εκεί με την εντολή (rule) @font-face
.
@font-face { font-family: Comfortaa; src: url('css/fonts/Comfortaa-VariableFont_wght.ttf'); }
Γραμματοσειρά από άλλον server
Μπορούμε να καλούμε τη γραμμοτοσειρά από άλλον server επίσης με την εντολή (rule) @font-face
.
@font-face { font-family: "Bitstream Vera Serif Bold"; src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf"); }
Εναλλακτική μορφή γραμματοσειράς
Μπορούμε να καλούμε εναλλακτική μορφή γραμματοσειράς (fallback) αν η πρώτη δεν υποστηρίζεται από τον browser.
@font-face { font-family: "my-font"; src: url(ideal-sans-serif.woff) format("woff"), url(basic-sans-serif.ttf) format("truetype"); }
Εναλλακτική γραμματοσειρά της Local
Μπορούμε να καλούμε γραμματοσειρά από το μηχάνημα του χρήστη (Local) και στην περίπτωση που δεν υπάρχει καλούμε από κάποιον server.
@font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; }
Χαρακτηριστικά ή ιδιότητες γραμματοσειράς
Ιδιότητα στιλ | Τιμή | CSS |
---|---|---|
font-size | xx-small/x-small/small/medium/large/x-large/xx-large ή μονάδα μήκους (πχ 12pt) | 1 |
font-family | Όνομα γραμματοσειράς όπως arial, times, verdana, tahoma κλπ. | 1 |
font-weight | normal/bold/bolder/lighter/100/200/300/400/500/600/700/800/900 | 1 |
font-style | normal/italic/oblique | 1 |
font-variant | normal/small-caps | 1 |
font | Συνδυασμό των πιο πάνω τιμών (π.χ.: font:verdana bold 14px;) | 1 |
@font-face | Ορίζει γραμματοσειρά που εσείς έχετε επιλέξει να γίνει λήψη (download). Η γραμματοσειρά πρέπει να υπάρχει στον σερβερ και να είναι σε μορφή .otf (open type font) ή .ttf (true type font) ή .eot (embeded open type) για microsoft. Η σύνταξη είναι: @font-face { font-family: myFont; src: url('Good_Font.otf'), url('Good_Font.ttf'), url('Good_Font.eot'); /* IE9 */ } |
3 |
Για το μέγεθος της γραμματοσειράς μπορείτε να χρησιμοποιήσετε εκτός από τη απόλυτη μονάδα μέτρησης pixels π.χ.: 15px
και σχετικές μονάδες μέτρησης όπως em
ή %
για παράδειγμα: font-size: 1.5em;
ή font-size: 120%;
Μπορείτε να συντομεύσετε την περιγραφή ενός αριθμού ιδιοτήτων, χρησιμοποιώντας την ιδιότητα font. Για παράδειγμα: font: bold italic large palatino, serif;