fontselector

字體選擇器

字體選擇器是一種易於使用的字體選擇器，它用具有字體預覽功能的下拉列表代替本機選擇元素。

您可以隨心所欲地託管字體。字體選擇器不與Google字體耦合。因此，您將沒有關於GDPR的任何問題。

字體選擇器用SCSS和嚴格鍵入的打字稿編寫。

請參閱演示：http：//fontselector.cilb.de

入門

像您習慣的那樣創建您的選擇元素。將字體URL作為數據屬性添加到每個選項：

 < 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構造函數的第二個參數以更改類名稱或收聽事件：

• BrapperClassName：字符串
• 下拉classname：字符串
• dropdownSelectedFontClassName：字符串
• dropdownselectedfontnameclassname：string
• 下拉fontlistClassName：字符串
• ISexpandedClassName：字符串
• Onexpanded：函數
• Onselected：功能
• OnCollapsed：功能

建造

• 運行npm install以安裝依賴項
• 運行npm run dev以在開發模式下構建JS和CSS
• 每次更改源文件時，運行npm run watch以在開發模式下構建JS和CSS
• 運行npm run build以在生產模式下構建JS和CSS（縮小）