fontselector

Seletor de fonte

O seletor de fontes é um seletor de fonte simples de usar que substitui seu elemento de seleção nativo por um suspensão que possui a funcionalidade de visualização da fonte .

Você pode hospedar as fontes onde quiser. O seletor de fontes não é acoplado às fontes do Google. Portanto, você não terá problemas em relação ao GDPR.

O seletor de fontes é escrito em SCSS e datilografado estritamente digitado.

Veja Demo : http://fontselector.cilb.de

Começando

Crie seu elemento selecionado como você está acostumado. Adicione o URL da fonte como um atributo de dados a cada opção:

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

Por favor, lembre -se: se você armazenar os URLs em algum host diferente do host do seu site, os cabeçalhos da CORS precisarão ser definidos corretamente.

Agora adicione o CSS à sua cabeça HTML ...

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

... e adicione o código JavaScript na parte inferior do seu corpo:

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

Isso é tudo!

Opções

Você pode passar um objeto de opções para o segundo argumento do construtor FonteSsetor para alterar os nomes da classe ou ouvir eventos:

• WrapperclassName: String
• DropDownClassName: String
• DropDownsElectedFontClassName: String
• DropDownsElectedFontnameclassName: String
• DropDownFontlistClassName: String
• isExpAiddClassName: String
• OneXPanded: function
• ONSELECETO: função
• ONCOLLAPSED: FUNÇÃO

Construir

• Execute npm install para instalar dependências
• Execute npm run dev para construir JS e CSS no modo de desenvolvimento uma vez
• Execute npm run watch para construir JS e CSS no modo de desenvolvimento cada vez que um arquivo de origem foi alterado
• Execute npm run build para construir JS e CSS no modo de produção (Minified)