html.dropdownlist MVC 下拉列表中的字体预览答案

【问题标题】：Font preview in dropdown list for html.dropdownlist MVChtml.dropdownlist MVC 下拉列表中的字体预览
【发布时间】：2011-07-05 06:49:50
【问题描述】：

我想实现一个下拉列表，实际显示所选字体类型的预览。例如，Arial 将显示为“Arial”作为文本，但使用 Arial 字体。知道我该如何完成它吗？现在我的代码看起来像这样，

    <%=Html.DropDownList("ChartFont", new List<SelectListItem>
                     {
                        new SelectListItem{Text="Arial", Value = "Arial"}, 
                        new SelectListItem{Text="Calibri", Value = "Calibri"},
                        new SelectListItem{Text="Tahoma", Value = "Tahoma"},
                        new SelectListItem{Text="Verdana", Value = "Verdana"},
                        new SelectListItem{Text="Times New Roman", Value = "Times New Roman"}
                     }) %>

非常感谢任何帮助！谢谢！

【问题讨论】：

你的方法是错误的。您将无法提供预览，因为并非所有用户都安装了所有字体。如果使用图像，您只能使其防弹，但这并不灵活。

标签： c# jquery asp.net-mvc html-select

【解决方案1】：

试试这个：

<script type="text/javascript">
    $(document).ready(function () {
        $("#ChartFont option").each(function () {
            $(this).css("font-family", $(this).val());
        });
    });
</script>

【讨论】：

【解决方案2】：

假设您有这个跨度（用于预览）：

<span id="preview"> Sample text </span>

您的 jquery 代码将是：

$("#ChartFont").change(function(){
  var font = $(this).val();
  $("#preview").css("font-family", font);
});

就是这样！希望这可以帮助。干杯

【讨论】：

这会有所帮助，但如果您知道我的意思，我会在下拉列表中寻找字体的预览，而不是单独的文本跨度。因此，下拉列表中的 Arial 将是带有字体 arial 的 Arial，而 tahoma 将是带有字体 tahoma 的 Arial。
基本上，你在 MS Word 中得到的，例如

【解决方案3】：

我猜在 HTML 选择中，选项不会在浏览器上呈现字体，但你可以在 optgroup 上应用字体，因此将每个选项放在不同的 optgroup 中（并使其可见为 false），并对其应用字体（在 Chrome 上测试） , 然后呈现的 HTML 就像，

<select id="ddlFontDropDownList">
<optgroup style="display:none;font-family:Agency FB;">
<option value="Agency FB">Agency FB</option>
</optgroup>
<optgroup style="display:none;font-family:Arial;">
<option  value="Arial">Arial</option>
</optgroup>
----------
---------- and so on

通过这种方式你可以实现这一点，做了类似的事情here，如果你愿意，请参考，

【讨论】：