Html style：レンダリング中にフォントファミリが乱れる

Question

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>

今、私は、HTMLファイルとしてPHPを使用してそれらを保存しています。そして、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>

あなたが親タグのスタイルを見ることができるようには一貫性がありません。 Chrome Inspectorから上記のouterHTMLをコピーしてコピーしました。私は、Chromeは自動的に挿入され見ることができます「」私は、なぜこの

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

とthis.fontファミリーは次に、この

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

のように見えるJSONからで行うフォントファミリ間ファイルがリロードされたとき、スタイルは正しく読み返されませんか？私がこれを克服する方法はありますか？スペースで囲まれたフォント名に引用符が必要なこのようなSOの質問を読んだことがあります。私の質問は、引用符がブラウザに含まれている場合、HTMLファイルの再読み込み時に引用符が無視される理由は何ですか？

Answer 1

二重引用符を使用してstyle属性の値をラップする場合は、その中で一重引用符を使用してフォント名をラップする必要があります。現時点で

は、次の手順を使用している：

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

しかし"二重引用符のための実体はそう、基本的に、何を書いたことです。

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

上記の二重引用符は、属性のすぐ後に「閉じる」と表示されます（PHPが"エンティティを解析して、"を出力している途中で推測している）font-family:の直後です。

ソリューションは、したがって、次のようにあなたのstyle属性を変更することです：

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

これを実現するには、次のようにJSONを変更する必要があります：

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