javascript - JavaScript/JQuery 文本预览

Question

我在看谷歌字体，我注意到他们有文本的实时预览，你可以在上面输入。我的问题是，我怎么能去创建一个输入字段，用户可以输入文本并看到它像谷歌字体一样填充 - 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)而是为每个字体系列定义了相同数量的类，并且这些类被应用于相应的 span 元素。