Question

我想创建一个页面，在浏览器中测试和显示我的网络字体，以比较相同用户输入文本的不同大小。稍后可能要比较不同的字体样式和下拉按钮等。我现在的问题是如何在浏览器字段中输入新文本，在同一页面的其他字段中立即显示不同的大小。非常感谢。这是可以正常显示字体的页面，但必须在每个字段中手动输入文本。谢谢你的帮助。

<html>
  <head>
    <link rel="stylesheet" type="text/css" media="screen" href="AlQuds.css" />
    <style type="text/css" media="screen">
      body { font-family: "AlQuds", Georgia; font-size: 40px ; }
      #big { font-size: 100px; background-color:#ede7ab;}
      #medium { font-size: 40px; background-color: #eab645}
      #small { font-size: 20px;  background-color:#d3ffcf}
    </style>
  </head>
  <body>
    <table style="width: 100%;" border="1">
      <col /> <col />
      <tbody>
        <tr>
        </tr>
        <tr>
          <td><img alt="alquds-regular-bold" src="alquds-regular-bold-sampler.jpg" style="display: block; text-align: center; margin-left: auto; margin-right: auto; width: 653px; height: 739px;" /></td>
          <td style="">
            <hr>
            <p >Input text below AlQuds Regular font in Arabic, Farsi or in a West European language such as Swedish.</p>
            <hr>
            <div id="big"  contenteditable="true" border="3"> إطبع هنا - type here.</div>
            <hr>
            <div id="medium"  contenteditable="true"  border="3"> إطبع هنا- type here.</div>
            <hr>
            <div id="small"  contenteditable="true" border="3">إطبع هنا - type here.</div>
            <hr>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Answer 1

如果你可以使用jQuery，你可以这样做：

$(document).ready(function(){
    $("a").click(function(){
        $("body").append('<div contenteditable style="font-size: ' + $("#size").val() + 'px;">Size ' + $("#size").val() + 'px</div>');
        return false;
    });
});

@import url(http://fonts.googleapis.com/css?family=Raleway);
body {font-family: 'Raleway';}
div {margin: 15px 0 0; border: 1px solid #ccc;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Size: <input type="text" id="size" />
<a href="#">Add New Size</a>

完整的HTML代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
      @import url(http://fonts.googleapis.com/css?family=Raleway);
      body {font-family: 'Raleway';}
      div {margin: 15px 0 0; border: 1px solid #ccc;}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $("a").click(function(){
          $("body").append('<div contenteditable style="font-size: ' + $("#size").val() + 'px;">Size ' + $("#size").val() + 'px</div>');
          return false;
        });
      });
    </script>
  </head>
  <body>
    Size: <input type="text" id="size" />
    <a href="#">Add New Size</a>
  </body>
</html>

在contenteditable的div中输入webfont文本同时出现在其他div中？

1 个答案:

完整的HTML代码