Html風格：字體家族變得搞砸了，而渲染

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>

現在，我使用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>

正如你所看到的樣式父標籤的並不一致。我從Chrome Inspector複製粘貼了上述outerHTML。我可以看到瀏覽器會自動插入一個「」字型家庭，當我做到這一點

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

的上面的第二個引號是在font-family:之後立即「關閉」了style屬性（我猜測你的PHP正在解析"實體並輸出"）。

的解決方案，因此，這是你的style屬性更改爲以下：

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

要做到這一點，你需要將JSON更改爲以下：

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