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

text properties input box for chosing a font

本文关键字：用于 选择 字体 属性 输入 文本      更新时间：2023-09-26

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());
});

这是可能的。你可以有一个额外的选择元素，并改变font-family属性，因为你正在做额外的CSS属性。

示例代码将是这样的:

<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());
});

JsFiddle

相关文章：