Стиль html: font-family перепутался во время рендеринга

Question

Я пытаюсь создать программу типа stick-note с помощью JqueryUI. Я создал заметку с разными шрифтами.

<div class="object ui-draggable ui-draggable-handle ui-resizable selected" id="element_9" style="top: 320.919px; left: 1145.88px; color: rgb(185, 54, 68); font-size: 1008.51%; width: 571px; right: auto; height: 606px; bottom: auto; transform: none; font-weight: 400; font-family: &quot;Allerta Stencil&quot;, sans-serif;" 
 
    data-type="text" data-font="f65"> 
 
    <div class="text-editable" contenteditable="false" style="cursor: all-scroll;">Enter your text here </div> 
 
    <div class="ui-rotatable-handle ui-draggable" style="transform: scale(2.22222);"></div> 
 
    <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90; transform: scale(2.22222);"></div> 
 
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; transform: scale(2.22222);"></div> 
 
    <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; transform: scale(2.22222);"></div> 
 
    <div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90; transform: scale(2.22222);"></div> 
 
</div>

Теперь я экономлю их с помощью PHP как HTML-файл. И, пытаясь загрузить файл HTML, это то, что я получаю после того, как браузер отображает HTML-файл.

<div class="object ui-draggable ui-draggable-handle ui-resizable selected" id="element_8" style="top: 320.919px; left: 1145.88px; color: rgb(185, 54, 68); font-size: 1008.51%; width: 571px; right: auto; height: 606px; bottom: auto; transform: none; font-weight: 400; z-index: auto;" 
 
    allerta="" stencil ",=" " sans-serif;"="" data-type="text" data-font="f65"> 
 
    <div class="text-editable" contenteditable="false" style="cursor: all-scroll;">Enter your text here </div> 
 
    <div class="ui-rotatable-handle ui-draggable" style="transform: scale(5.71429);"></div> 
 
    <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90; transform: scale(5.71429);"></div> 
 
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; transform: scale(5.71429);"></div> 
 
    <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; transform: scale(5.71429);"></div> 
 
    <div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90; transform: scale(5.71429);"></div> 
 
</div>

Как вы можете видеть стили родительского тега не соответствует. Я скопировал наложенный выше внешнийHTML от Chrome Inspector. Я могу видеть, Chrome автоматически вставляет «» между семьей шрифтов, когда я делаю это

object.css({"font-family": this.font_family}); 

и this.font семьи это из JSON, который выглядит как этот

var fonts = [{font_family : 'Allerta Stencil, sans-serif', name: 'f65', val: "Allerta Stencil"},...] 

Тогда почему когда файл перезагружается, стиль не читается правильно? Есть ли способ преодолеть это. Я прочитал некоторые SO-вопросы, подобные этому, где имена шрифтов с пробелами требуют кавычек. Мой вопрос: если кавычки включены браузером, то почему при перезагрузке котировок HTML-файлов игнорируются?

Answer 1

Поскольку вы используете двойные кавычки для обертывания значения атрибута style, вам нужно будет использовать одинарные кавычки внутри него для обертывания имен шрифтов.

На данный момент, вы используете следующее:

style="font-family:"Alerta Stencil",sans-serif;" 

Но " является объектом для двойной кавычки так, по сути, то, что вы написали это:

style="font-family:"Alerta Stencil",sans-serif;" 

второй котировочный знак выше «закрывает» атрибут style сразу после font-family: (я предполагаю, что где-то по пути ваш PHP анализирует объект " и выводит ").

Решение, таким образом, чтобы изменить атрибут style к следующему:

style="font-family:'Alerta Stencil',sans-serif;" 

Для достижения этой цели, вам нужно будет изменить JSON к следующему:

var fonts=[{font_family:"'Allerta Stencil',sans-serif",name:"f65",val:"Allerta Stencil"};