JQuery динамически добавленный текст не будет загружать стиль веб-шрифта

Question

JQuery динамически добавленный текст не будет загружать стиль веб-шрифта

0

У меня есть простая веб-страница:

<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 не работало), и изображение не загружается.

Я уверен, что это что-то общее, но не может найти вопросов по этому вопросу. Что делать?

Andry 20 окт. 2013, в 19:30

Источник

0

Вы уверены, что шрифты действительно загружены? Вы можете проверить это в инструментах для веб-разработчиков / Firebug. Какой браузер вы используете?
tpolyak 20 окт. 2013, в 16:56

Теги:

javascript

jquery

html

css

fonts

4 ответа

1

Вы заключили двойные кавычки:

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

Nelson 20 окт. 2013, в 15:35

1

Похож на свою проблему с кавычками, попробуйте

  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>');

Musa 20 окт. 2013, в 14:49

1

Thats, потому что вы перепутали его с кавычками - вы начинаете значение атрибута style с помощью ', а затем первое ' из вашего объявления font-family заканчивает его снова.

Просто используйте двойные кавычки для значения атрибута style который вы можете сделать без какого-либо экранирования, поскольку литерал текста JavaScript использует ' качестве разделителей", а затем оставить выделенные одинарные кавычки для семейства font-family:

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

CBroe 20 окт. 2013, в 14:06

Ещё вопросы

Вы уверены, что шрифты действительно загружены? Вы можете проверить это в инструментах для веб-разработчиков / Firebug. Какой браузер вы используете?

Pierre Michard · Accepted Answer · 2013-10-20T15-02-00.000Z

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