Question

我正在尝试制作Google字体字体显示类型的东西，用户键入字体名称并显示文本，文本以他选择的字体显示。
JS：

  $("#font, #display-text").keyup(function () {
      var fontFamily = $(this).val();
      var font = fontFamily.split(' ').join('+');
      var prefix = "//fonts.googleapis.com/css?family=";
      var fontName = prefix + font;
      var displayText = $("#display-text").val();
      $("#font-link").attr('href', fontName);
      $("#display").text(displayText).css('font-family', "'" + fontName + "'");

  });

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>
    </table>
</div>
<div id="display"></div>
<link id="font-link" rel="stylesheet" href="">

我知道字体是从fonts.googleapis.com收到的，但是显示不正确 FIDDLE

Answer 1

变量fontName是prefix和font。因此，如果有人输入Slabo 27px，则输入css的字体系列为：fonts.googleapis.com/css?family=Slabo+27px，而不是Slabo 27px。相反，给这个css：

 $("#font, #display-text").keyup(function () {
      var fontFamily = $(this).val();
      var font = fontFamily.split(' ').join('+');
      var prefix = "//fonts.googleapis.com/css?family=";
      var fontName = prefix + font;
      var displayText = $("#display-text").val();
      $("#font-link").attr('href', fontName);
      $("#display").text(displayText).css('font-family', "'" + fontFamily + "'");

  });

请注意fontName中的.css已更改为fontFamily。

链接没有被改变

1 个答案: