fontselector

Selector de fuente

Font Selector es un selector de fuentes simple de usar que reemplaza su elemento selecto nativo con un menú desplegable que tiene una funcionalidad de vista previa de fuentes .

Puedes alojar las fuentes donde quieras. El selector de fuentes no está acoplado a Google Fonts. Por lo tanto, no tendrá ningún problema con respecto a GDPR.

El selector de fuentes está escrito en SCSS y mecanografiado estrictamente.

Ver demostración : http://fontselector.cilb.de

Empezando

Cree su elemento seleccionado como si esté acostumbrado. Agregue la URL de fuente como un atributo de datos a cada opción:

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

Por favor, tenga en cuenta: si almacena las URL en un host diferente al anfitrión de su sitio web, los encabezados Cors deben configurarse correctamente.

Ahora agregue el CSS a su cabeza HTML ...

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

... y agregue el código JavaScript en la parte inferior de su cuerpo:

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

¡Eso es todo!

Opción

Puede pasar un objeto de opciones al segundo argumento del constructor FontSelector para cambiar los nombres de clases o escuchar eventos:

• wrapperClassName: cadena
• DropdownClassName: String
• desplegable selectedFontClassName: cadena
• DropdownselectedFontnamECLassName: cadena
• DropDownFontListClassName: String
• isExpandedClassName: cadena
• Onexpanded: función
• OnSelected: función
• oncolalpes: función

Construir

• Ejecutar npm install para instalar dependencias
• Ejecute npm run dev para construir JS y CSS en modo de desarrollo una vez
• Ejecutar npm run watch para construir JS y CSS en modo de desarrollo cada vez que se ha cambiado un archivo fuente
• Ejecutar npm run build para construir JS y CSS en modo de producción (minificado)