fontselector

フォントセレクター

Font Selectorは、ネイティブ選択要素をフォントプレビュー機能を備えたドロップダウンに置き換えるFontピッカーを簡単に使用できます。

好きな場所にフォントをホストできます。フォントセレクターはGoogleフォントと結合されていません。したがって、GDPRに関して問題はありません。

フォントセレクターは、SCSSおよびStrictly Typed TypeScriptで記述されています。

デモ：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 >

気をつけてください：Webサイトのホストとは異なるホストに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コンストラクターの2番目の引数に渡して、クラス名を変更したり、イベントを聞いたりできます。

• wrapperclassname：文字列
• DropDownClassName：文字列
• DropDownedectedFontClassName：文字列
• DropDownedectedFontNameClassName：文字列
• DropDownFontListClassName：文字列
• isexpandedClassName：文字列
• OneXPanded：function
• オンになっている：機能
• oncollapsed：function

建てる

• npm install実行して、依存関係をインストールします
• npm run devを実行して、開発モードでJSとCSSを1回構築する
• npm run watch
• npm run build実行して、生産モードでJSとCSSを構築する（マニファイ）