Γραμματοσειρές και στιλ

Μπορείτε να εισάγετε μία ή περισσότερες γραμματοσειρές στο έγγραφο με τους εξής παρακάτω τρόπους:

Γραμματοσειρά από το μηχάνημα του επισκέπτη (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;