Question

http://protected-river-1861.herokuapp.com/

我有对齐，颜色，大小和宽度，但我需要添加至少一个。是否可以有一个字体输入框，用户可以选择使用哪种字体？

<p>Hover over the control names to see some useful tips</p>
<span class="simple-tooltip" title="Use this control to choose the horizontal position    of the text">Horizontal: <input type="number" value="10" id="left">
<span class="simple-tooltip" title="Use this control to choose the vertical position of   the text">Veritcal: <input type="number" value="10" id="top">
<span class="simple-tooltip" title="Use this control to choose the width of the text">Width: <input type="number" value="400" id="width"> 
<span class="simple-tooltip" title="Use this control to choose size of the text">Size:    <input type="number" value="32" id="size">
<span class="simple-tooltip" title="Use this control to choose the colour of the text

JS：

$(document).on('input', '#text', function() {
$("#caption").text($(this).val());
});
$(document).on('change', '#left', function() {    
$("#caption").css("left", $(this).val() + 'px');
});
$(document).on('change', '#top', function() {
$("#caption").css("top", $(this).val() + 'px');
});

  $(document).on('change', '#width', function() {
$("#caption").css("width", $(this).val() + 'px');
});

  $(document).on('change', '#size', function() {
$("#caption").css("font-size", $(this).val() + 'px');
});

  $(document).on('change', '#colour', function() {
$("#caption").css("color", $(this).val());
});

Answer 1

是的，这是可能的。您可以使用其他Select元素并更改font-family属性，就像使用其他CSS属性一样。

示例代码将是这样的。

<强> HTML

<form id="myform">
    <select id="font">
        <option value="Arial">Arial</option>
        <option value="Verdana ">Verdana</option>
        <option value="Impact ">Impact</option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>
</form>
<br/>
<div id="container">
    <p  class="changeMe" >Text into container</p>
</div>

jQuery

$("#font").change(function () {

    $('.changeMe').css("font-family", $(this).val());

});

用于选择字体的文本属性输入框

1 个答案:

JsFiddle