astro font picker
1.0.0
Astro Font Picker ist eine Entwicklungs -Symbolleisten -Integration, mit der Sie verschiedene Schriftarten auf Ihrer Website ausprobieren können. Es verwendet Google -Schriftarten, um über 1000 Open Source -Schriftarten zu laden. Verwenden Sie die Auf-/Abtasten, um schnell durch verschiedene Schriftarten zu fahren, oder wählen Sie eine aus der Liste aus.
npx astro add astro-font-picker
npm install astro-font-picker
Fügen Sie Folgendes zu Ihrer Datei astro.config.mjs hinzu:
import astroFontPicker from 'astro-font-picker' ;
export default {
integrations : [
astroFontPicker ( ) ,
// other integrations
] ,
} ; Astro Font Picker wird in der Dev -Symbolleiste als neues Symbol angezeigt, das standardmäßig in Astro 4.0 und höher aktiviert ist.
Filtern Sie die Schriftarten nach Typ (optional) und wählen Sie dann eine Schriftfamilie. Die Schrift wird auf das Körperelement Ihrer Website angewendet.
Wenn Sie Schriftfamilien auf Elemente angewendet haben, die niedriger als das Körperelement sind, wird diese Schriftarten nicht überschrieben, es sei denn, Sie aktivieren den Override All Styles .
Hinweis: Sie können die Auf-/Ab -Pfeiltasten verwenden, um schnell durch die Schriftarten zu fahren.
Dieser Umschalter steuert, ob die ausgewählte Schriftart auf die Seite angewendet wird. Es ist standardmäßig aktiviert.
Dieser Umschalter überschreibt alle font-family auf Ihrer Website mit der ausgewählten Schriftart. Ohne dies fähige Schriftfamilien, die sich auf Elemente, die niedriger als das Körperelement sind, angewendet werden, werden nicht überschrieben.
Der Hauptgrund für die Deaktivierung des Override All Styles besteht darin, den Schriftart bestimmter Elemente oder Abschnitte Ihrer Website zu verwalten. Auf diese Weise, wenn Sie mit dem Schriftart ausgewählt werden, um eine Schriftart für andere Bereiche auszuwählen, wird sie keine Schriftarten überschrieben, für die Sie sich bereits entschieden haben.
Dies ist der Stylesheet -Link und CSS, den Sie kopieren und in Ihre Website einfügen können, um die Schriftart dauerhaft zu installieren. Zum Beispiel:
In deinem head :
< link rel =" stylesheet " href =" https://fonts.googleapis.com/css2?family=Itim " />In Ihrem CSS:
h1 {
font-family : Itim , cursive;
}Dieser Link öffnet die ausgewählte Schriftart in Google -Schriftarten.
Alle Einstellungen (aktiviert, überschreiben, Schriftart und Schriftfamilie) werden im Sitzungsspeicher gespeichert, sodass sie nicht verloren gehen, wenn die Seite während der Entwicklung aktualisiert wird.
Dieses Projekt basiert auf der schriftlichen Bibliothek, einer eigenständigen Schriftartin, die auf jeder Website verwendet werden kann.
