<select>下拉列表中的字体预览？</select>

Question

我一直在环顾四周，在下拉列表中如何制作字体预览（以他们选择的相同字体显示文字）并不多。任何人都能指出我正确的方向吗？感谢。

Answer 1

要提供仅使用 select元素的替代方案，将允许设置字体样式，并应用其他css，同时更新传统{用于提交到服务器/脚本的{1}}元素：

HTML：

select

jQuery的：

<form action="#" method="post">
    <select id="fontSelector" name="fontSelector">
        <option value="calibri">Calibri</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>
</form>

<ul id="fontList">
    <li id="calibri" class="selected">Calibri</li>
    <li id="timesNewRoman">Times New Roman</li>
    <li id="comicSansMS">Comic Sans MS</li>
</ul>

JS Fiddle demo

注意：

1. 这假定$('#fontList li').click( function(){ var chosen = $(this).index(); $('#fontSelector option:selected') .removeAttr('selected'); $('#fontSelector option') .eq(chosen) .attr('selected',true); $('.selected').removeClass('selected'); $(this).addClass('selected'); }); 元素的顺序与li元素的顺序相同，因为成为option的{​​{1}}由option选择index（selected）。

参考文献：

1. click()。
2. index()。
3. removeAttr()。
4. eq()。
5. attr()。
6. removeClass()。
7. addClass()。

Answer 2

您可能想要使用 HiGoogleFonts 。

滚动时不会加载所有字体。它只加载单击的字体。对于字体预览，它使用加载速度非常快的单个图像。它有700多种字体

Download it from github

See demo here