jquery .css()不使用font-size

时间:2015-07-20 18:16:12

标签: jquery html

我知道这个类型还有很多其他问题,但没有一个问题给我答案。这没有错误,我看不到任何错误或语法错误。

我正在尝试使用jquery制作一个谷歌字体选择器(种类):
JS:

$("#submit").click(function () {
    var fontFamilyOrig = $("#font").val();
    var prefix = "//fonts.googleapis.com/css?family=";
    var fontFamily = fontFamilyOrig.split(' ').join('+');
    fontFamily = prefix + fontFamily;
    var fontSize = $("#font-size").val();
    var displayText = $("#display-text").val();
    var boldToggle = $("#bold");
    var itToggle = $("#italic");
    $("#font-link").attr('href', fontFamily);
    $("#display").css({
        'font-family': fontFamilyOrig,
        'font-size': fontSize
    }).text(displayText);
});

HTML:

<div>
           <table><tr> <td>Type the name of the font (in full):</td> <td><input type="text" name="font" id="font"></td></tr>
       <tr><td> Type your display text:</td> <td><input type="text" id="display-text"></td></tr>
        <tr>
            <td>Choose a font size:</td><td><input type="number" value="" id="font-size"></td></tr>
            <tr>
                <td>Other options:</td>
                <td>
                    <label><input type="checkbox" id="bold">Bold</label>
                    <label><input type="checkbox" id="italic">Italic</label>
                </td>
            </tr>
            <tr>
                <td><input type="submit" value="Go" id="submit"></td>
            </tr>

       </table>
        </div>
        <div id="display">

        </div>
        <link id="font-link" rel="stylesheet" href="">

所以它的作用是以用户指定的字体和字体大小显示用户输入的文本。但字体有效,而字体大小则不然。为什么只有字体工作,而不是字体大小?  FIDDLE

1 个答案:

答案 0 :(得分:4)

在字体大小的末尾需要px或em才是我的猜测。就像你要说的那样

fontSize: fontSize + "px";

fontSize: fontSize + "em";