Question

是否可以在font-family中设置<option>？我试过了font-family但它没有用。这是我的代码：

var fonts = ["Arial", "Helvetica", "Serif", "Cambria"];
for (i = 0; i < fonts.length;i++) {
    var font  = document.createElement("option");
    var fontT = document.createTextNode(fonts[i]);

    document.getElementById ("t-font").appendChild (font);
    font.appendChild (fontT);
    font.style.fontFamily = fonts[i];
}

（Demo）

js是否有问题，或者用html完全无法做到这一点？

Answer 1

适用规范中没有任何内容阻止您在选项元素上设置font-family，但浏览器支持不稳定。

Answer 2

我认为您应该更改方法（或HTML标记），因为select元素不适合此目的。每个浏览器的行为都不同。我会使用RADIO按钮。像这样：

<div id="choose_font">
</div>
<script>
    var fonts = ["Arial", "Helvetica", "Serif", "Cambria"];
    var container = document.getElementById('choose_font');
    for (i = 0; i < fonts.length;i++) {
        var input = document.createElement('INPUT');
        var label = document.createElement('LABEL');
        input.setAttribute("id","t_"+fonts[i]);
        input.setAttribute("type","radio");
        input.setAttribute("name","t_font");
        label.setAttribute("for","t_"+fonts[i]);
        label.style.fontFamily = fonts[i];
        label.appendChild(document.createTextNode(fonts[i]));
        container.appendChild(input);
        container.appendChild(label);
        container.appendChild(document.createElement('BR'));
    }
</script>

使用适当的CSS，您可以使其看起来像选择。

是否可以在<option> </option>中设置font-family

2 个答案: