fontselector

Sélecteur de police

Le sélecteur de police est un sélecteur de polices simple à utiliser qui remplace votre élément sélectionné natif par une liste déroulante qui a une fonctionnalité d'aperçu de police .

Vous pouvez héberger les polices où vous le souhaitez. Le sélecteur de police n'est pas couplé aux polices Google. Vous n'aurez donc aucun problème concernant le RGPD.

Le sélecteur de police est écrit en SCSS et dactylographié strictement typé.

Voir démo : http://fontelector.cilb.de

Commencer

Créez votre élément sélectionné comme vous y êtes habitué. Ajoutez l'URL de police en tant qu'attribut de données à chaque option:

 < select id =" my-font-select " >
    < option value =" Open Sans " data-font-url =" ./fonts/OpenSans-Regular.ttf " > Open Sans </ option >
</ select >

Veuillez vous occuper: si vous stockez les URL sur un hôte différent de l'hôte de votre site Web, les en-têtes CORS doivent être réglés correctement.

Ajoutez maintenant le CSS à votre tête HTML ...

 < head >
    < link rel =" stylesheet " type =" text/css " href =" font-selector/styles.css " />
</ head >

... et ajoutez le code JavaScript au bas de votre corps:

 < script type =" text/javascript " >
    new FontSelector ( '#my-font-select' ) ;
</ script >

C'est tout!

Options

Vous pouvez transmettre un objet Options au deuxième argument du constructeur FonTSelector pour modifier les noms de classe ou écouter les événements:

• WapperClassName: chaîne
• dropdownclassname: chaîne
• dropdownselectectionfontclassName: String
• dropdownselectectionfontNameClassName: String
• dropdownfontlistClassName: String
• ISEXPANDCLASSNAME: String
• onexpanded: fonction
• onsected: fonction
• oncollapsed: fonction

Construire

• Exécutez npm install pour installer les dépendances
• Exécutez npm run dev pour construire JS et CSS en mode développement une fois
• Exécutez npm run watch pour construire JS et CSS en mode développement chaque fois qu'un fichier source a été modifié
• Exécuter npm run build pour construire JS et CSS en mode de production (mini-point)