javascript - JavaScript/JQuery テキスト プレビュー

Question

Google Fonts を見ていたら、一番上に入力できるテキストのライブ プレビューがあることに気付きました。私の質問は、Google フォントと同じように、ユーザーがテキストを入力して入力できる入力フィールドを作成するにはどうすればよいかということです - http://www.google.com/fonts/

keyup を使用してテキストを変更することはわかっていますが、大量の .css('font-family...

あなたのアイデアを教えてください！

Answer 1

Google フォントには<span>、適切なフォントが事前設定された要素があります。

例：

<span class="sample Kite-One-normal-400" style="font-size: 28px;">Hello World!</span>

テキストが変更されたときに行うことは、スパン内のコンテンツを変更することだけです。

$('span.sample').text(<new-text>);

Answer 2

Google フォントは大量に使用するのでは.css('font-family', val)なく、代わりに各フォント ファミリに対して同じ数のクラスが定義されており、それらのクラスは対応するスパン要素に適用されます。