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（缩小）