Αυτο-φιλοξενούμενες γραμματοσειρές
Εάν θέλετε να ομαδοποιήσετε τις γραμματοσειρές που χρησιμοποιούνται στην εφαρμογή Ιστού σας, τότε το Fontsource είναι μια βιβλιοθήκη στην οποία ίσως θέλετε να ρίξετε μια ματιά (σύνδεσμος επίσης στο προσάρτημα στο τέλος της σελίδας). Σας επιτρέπει να εγκαταστήσετε τις γραμματοσειρές που θέλετε να καταναλώσετε, πράγμα που σημαίνει ότι οι γραμματοσειρές σας φιλοξενούνται μόνοι σας και δεν απαιτείται CDN για φόρτωση.
Εγκατάσταση κάθε γραμματοσειράς
Για να εγκαταστήσετε τις γραμματοσειρές που θέλετε να χρησιμοποιήσετε, απλώς εκτελέστε την εντολή εγκατάστασης για κάθε παραλλαγή. Τα παρακάτω αποσπάσματα κώδικα δείχνουν πώς θα εγκατασταθεί η γραμματοσειρά για αυτό το PWA.
npm install @fontsource/work-sans
Στο σημείο εισόδου της εφαρμογής μου, πρέπει στη συνέχεια να καταναλώσω το εγκατεστημένο πακέτο εισάγοντάς το. Αυτό μου επιτρέπει να ορίζω με ακρίβεια τι χρειάζομαι χωρίς να προσθέτω γενικά έξοδα. Καθώς οι γραμματοσειρές μπορεί να είναι αρκετά μεγάλες σε μέγεθος, αυτή είναι μια εξαιρετική ευκαιρία να αποθηκεύσετε Byte.
import "@fontsource/work-sans/400.css";
import "@fontsource/work-sans/900-italic.css";
Τέλος, πρέπει να ορίσω την οικογένεια γραμματοσειρών στο CSS μου. Ανάλογα με τη βιβλιοθήκη που χρησιμοποιείτε (για παράδειγμα Tailwind.css), αυτός ο κώδικας μπορεί να φαίνεται λίγο διαφορετικός για εσάς.
body {
font-family: "Work Sans", sans-serif;
}
Μεταβλητές γραμματοσειρές
Το Fontsource παρέχει επίσης μια επιλογή εγκατάστασης μεταβλητών γραμματοσειρών, πράγμα που σημαίνει ότι έχετε πρόσβαση στα πιο πρόσφατα εργαλεία όταν πρόκειται για τη φόρτωση γραμματοσειρών. Λάβετε υπόψη ότι δεν είναι όλες οι γραμματοσειρές διαθέσιμες ως μεταβλητές παραλλαγές.
