Οι γραμματοσειρές web safe είναι γραμματοσειρές που εγκαθίστανται καθολικά σε όλα τα προγράμματα περιήγησης και τις συσκευές.
Ωστόσο, δεν υπάρχουν 100% πλήρως ασφαλείς γραμματοσειρές στο διαδίκτυο. Υπάρχει πάντα ένα πιθανότητα να μην βρεθεί μια γραμματοσειρά ή να μην έχει εγκατασταθεί σωστά.
Επομένως, είναι πολύ σημαντικό να χρησιμοποιείτε πάντα εναλλακτικές γραμματοσειρές.
Αυτό σημαίνει ότι θα πρέπει να προσθέσετε μια λίστα με παρόμοιες "εφεδρικές γραμματοσειρές". το font-family ιδιοκτησία. Αν το Η πρώτη γραμματοσειρά δεν λειτουργεί, το πρόγραμμα περιήγησης θα δοκιμάσει την επόμενη και την επόμενη και ούτω καθεξής. Τελειώνετε πάντα τη λίστα με ένα γενικό οικογενειακό όνομα γραμματοσειράς.
Εδώ, υπάρχουν τρεις τύποι γραμματοσειρών: Tahoma, Verdana και Σανς σέριφ. Η δεύτερη και η τρίτη γραμματοσειρά είναι αντίγραφα ασφαλείας, σε περίπτωση που δεν βρεθεί η πρώτη.
p {
font-family: Tahoma, Verdana, sans-serif;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>CSS Fallback Fonts</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Η ακόλουθη λίστα είναι οι καλύτερες γραμματοσειρές ασφαλών ιστού για HTML και CSS:
Σημείωση: Προτού δημοσιεύσετε τον ιστότοπό σας, να ελέγχετε πάντα τον τρόπο λειτουργίας σας Οι γραμματοσειρές εμφανίζονται σε διαφορετικά προγράμματα περιήγησης και συσκευές και χρησιμοποιούνται πάντα εναλλακτικές γραμματοσειρές!
Το Arial είναι η πιο ευρέως χρησιμοποιούμενη γραμματοσειρά τόσο για διαδικτυακά όσο και για έντυπα μέσα. Arial είναι επίσης η προεπιλεγμένη γραμματοσειρά στα Έγγραφα Google.
Το Arial είναι μια από τις ασφαλέστερες γραμματοσειρές Ιστού και είναι διαθέσιμη σε όλα τα μεγάλα λειτουργικά συστήματα.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Το Verdana είναι μια πολύ δημοφιλής γραμματοσειρά. Το Verdana είναι ευανάγνωστο ακόμα και για μικρά μεγέθη γραμματοσειράς.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Η γραμματοσειρά Tahoma έχει λιγότερο χώρο μεταξύ των χαρακτήρων.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Tahoma, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Το Trebuchet MS σχεδιάστηκε από τη Microsoft το 1996. Χρησιμοποιήστε αυτή τη γραμματοσειρά προσεκτικά. Δεν υποστηρίζεται από όλα τα λειτουργικά συστήματα για κινητά.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Η Times New Roman είναι μια από τις πιο αναγνωρίσιμες γραμματοσειρές στον κόσμο. Φαίνεται επαγγελματική και χρησιμοποιείται σε πολλές εφημερίδες και ιστοσελίδες «ειδήσεων». Είναι επίσης το κύρια γραμματοσειρά για συσκευές και εφαρμογές Windows.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Times New Roman', serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Η Georgia είναι μια κομψή γραμματοσειρά serif. Είναι πολύ ευανάγνωστο σε διαφορετικά μεγέθη γραμματοσειράς, επομένως είναι καλός υποψήφιος για σχεδιασμό που ανταποκρίνεται σε κινητά.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Το Garamond είναι μια κλασική γραμματοσειρά που χρησιμοποιείται για πολλά έντυπα βιβλία. Έχει ένα διαχρονικό εμφάνιση και καλή αναγνωσιμότητα.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Garamond, serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Η Courier New είναι η πιο ευρέως χρησιμοποιούμενη γραμματοσειρά monospace serif. Το Courier New χρησιμοποιείται συχνά με οθόνες κωδικοποίησης και πολλούς παρόχους email χρησιμοποιήστε το ως προεπιλεγμένη γραμματοσειρά τους. Η Courier New είναι επίσης η τυπική γραμματοσειρά για την ταινία σενάρια.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Courier New', monospace;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Η γραμματοσειρά Brush Script MT σχεδιάστηκε για να μιμείται το χειρόγραφο. Είναι κομψό και εκλεπτυσμένο, αλλά μπορεί να είναι δύσκολο να διαβαστεί. Χρησιμοποιήστε το προσεκτικά.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Brush Script MT', cursive;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Συμβουλή: Δείτε επίσης όλες τις διαθέσιμες γραμματοσειρές Google και τον τρόπο χρήσης τους.