Question

我有一个简单的网页：

<html>
  <head>
    <title>...</title>
    <script ...></script>
    <link .../>
    <script>
      /* HERE */
    </script>
  </head>
  <body>
    <div id="cnt"></div>
  </body>
</html>

在头部我加载 jQuery 脚本和 Google Web Fonts 字体样式。

我想动态地向我的#cnt添加内容，然后执行以下操作（下面的代码放在之前打印的代码清单中突出显示的位置）：

$(document).ready(function(){
  var $el1 = $('<div  style=\'position:absolute;top:50px;left:425px;font-family:\'Oxygen\',sans-serif;font-weight:300;font-size:35px\'>Hello1</div>');
  var $el2 = $('<div  style=\'width:350px;height:200px;position:absolute;top:110px;left:425px;font-family:\'Open Sans\',sans-serif;font-weight:400;font-size:19px\'>Hello2.</div>');
  var $el3 = $('<div  style=\'width:350px;height:200px;position:absolute;top:110px;left:425px;font-family:\'Open Sans\',sans-serif;font-weight:400;font-size:19px\'>Hello3.</div>');
  var $el4 = $('<div id=\'imm\' style=\'position:absolute;top:-10px;left:-20px;background-image:url(\'images/imm.png\');width:399px;height:503px\'></div>');
  $('#main').append($el1); 
  $('#main').append($el2); 
  $('#main').append($el3); 
  $('#main').append($el4); 
});

但是，一旦显示字体没有样式，因为它们应该是（意味着未应用Google字体），我的文字会使用默认设置显示，就像指定的font-family没有工作）和图片未加载。

我确信这是常见的但无法就此问题找到问题。怎么办？

Answer 1

那是因为你用引号搞砸了它 - 你用style开始'属性的值，然后是'声明的第一个font-family < em>再次结束。

只需使用双引号作为style属性的值 - 您可以执行此操作而不进行任何转义，因为JavaScript文本文字使用'作为分隔符 - 然后保留转义的单引号font-family：

var $el1 = $('<div  style="position:…;font-family:\'Oxygen\',sans-serif;…font-size:35px">Hello1</div>');

Answer 2

看起来像是报价问题，请尝试

  var $el1 = $('<div  style="position:absolute;top:50px;left:425px;font-family:\'Oxygen\',sans-serif;font-weight:300;font-size:35px">Hello1</div>');
  var $el2 = $('<div  style="width:350px;height:200px;position:absolute;top:110px;left:425px;font-family:\'Open Sans\',sans-serif;font-weight:400;font-size:19px">Hello2.</div>');
  var $el3 = $('<div  style="width:350px;height:200px;position:absolute;top:110px;left:425px;font-family:\'Open Sans\',sans-serif;font-weight:400;font-size:19px">Hello3.</div>');
  var $el4 = $('<div id=\'imm\' style="position:absolute;top:-10px;left:-20px;background-image:url(\'images/imm.png\');width:399px;height:503px"></div>');

Answer 3

你是双引号：

$('<div style=\'posiblablafont-family:\'Oxygen\',font-size:35px\'>Hello1</div>');
 USE " here ---^                                     AND HERE --^

Answer 4

JQuery可以帮助你以更易读的方式做同样的事情（避免一些头痛）。

  var $el3 = $('<div >Hello2.</div>')
                 .css({
                     'width':'350px',
                     'height':'200px',
                     'position':'absolute',
                     'top':'110px',
                     'left':'425px',
                     'font-family':"'Open Sans',sans-serif;font-weight:400;font-size:19px"});

jQuery动态添加文本不会加载web字体样式

4 个答案: