astro font picker
1.0.0
Astro Font Picker est une intégration de la barre d'outils de développement qui vous permet d'essayer différentes polices sur votre site. Il utilise des polices Google pour charger plus de 1000 polices open source. Utilisez les touches haut / bas pour parcourir rapidement différentes polices, ou choisissez-en une dans la liste.
npx astro add astro-font-picker
npm install astro-font-picker
Ajoutez ce qui suit à votre fichier astro.config.mjs :
import astroFontPicker from 'astro-font-picker' ;
export default {
integrations : [
astroFontPicker ( ) ,
// other integrations
] ,
} ; Astro Font Picker apparaîtra comme une nouvelle icône dans la barre d'outils Dev, qui est activée par défaut dans Astro 4.0 et supérieur.
Filtrez les polices par type (facultatif), puis choisissez une famille de polices. La police sera appliquée à l'élément corporel de votre site.
Si vous avez des familles de polices appliquées à des éléments inférieurs à l'élément corporel, il ne remplacera pas ces polices à moins que vous ne permettez à la Override All Styles .
Astuce: vous pouvez utiliser les touches de flèches haut / bas pour faire un vélo rapidement à travers les polices.
Cette bascule contrôle si la police sélectionnée est appliquée à la page. Il est activé par défaut.
Cette bascule remplacera tous les styles font-family de votre site avec la police sélectionnée. Sans cela, toute famille de polices appliquée aux éléments inférieure à l'élément corporel ne sera pas remplacée.
La principale raison d'avoir la Override All Styles désactivé est de maintenir le style de police d'éléments ou de sections spécifiques de votre site. De cette façon, lorsque vous utilisez le sélecteur de police pour sélectionner une police pour d'autres domaines, il ne remplacera pas les polices que vous avez déjà décidées.
Il s'agit du lien de feuille de style et de CSS que vous pouvez copier et coller dans votre site pour installer en permanence la police. Par exemple:
Dans votre élément head :
< link rel =" stylesheet " href =" https://fonts.googleapis.com/css2?family=Itim " />Dans votre CSS:
h1 {
font-family : Itim , cursive;
}Ce lien ouvrira la police sélectionnée dans Google Fonts.
Tous les paramètres (activés, remplacer, type de police et famille de polices) sont enregistrés dans le stockage de session, ils ne sont donc pas perdus lorsque la page se rafraîchit pendant le développement.
Ce projet est basé sur la bibliothèque Fontable, qui est un cueilleur de police autonome qui peut être utilisé sur n'importe quel site Web.
