fontselector

Селектор шрифтов

Селектор шрифта - это простой в использовании сборщик шрифтов, который заменяет ваш собственный элемент Select на выпадающий список, который имеет функциональность предварительного просмотра шрифта .

Вы можете размещать шрифты, где бы вы ни нравились. Селектор шрифтов не связан с шрифтами Google. Так что у вас не будет никаких проблем, касающихся GDPR.

Селектор шрифтов записан в SCSS и строго напечатал TypeScript.

См. Демо : http://fontselector.cilb.de

Начиная

Создайте свой выбор, как вы привыкли к нему. Добавьте URL -адрес font в качестве атрибута данных в каждую опцию:

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

Пожалуйста, обратите внимание: если вы храните URL -адреса на каком -то другом хосте, чем в хосте вашего веб -сайта, заголовки CORS должны быть правильно установлены.

Теперь добавьте CSS в свою HTML -голову ...

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

... и добавьте код JavaScript внизу вашего тела:

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

Вот и все!

Параметры

Вы можете передать объект параметров во второй аргумент конструктора Fontselector, чтобы изменить имена классов или прослушать события:

• warperclassname: String
• DropdownClassName: String
• ROVENTODESSECTEDFONTCLASSNAME: String
• Расположенный SelectedFontnameClassName: String
• DropdownFontListClassName: String
• isExpededClassName: String
• exexped: функция
• On Selected: функция
• oncollapsed: функция

Строить

• Запустите npm install для установки зависимостей
• Запустите npm run dev для создания JS и CSS в режиме разработки один раз один раз
• Запустите npm run watch для создания JS и CSS в режиме разработки каждый раз, когда был изменен исходный файл
• Запустите npm run build , чтобы построить JS и CSS в производственном режиме (мини -минимум)