jquery - HTML 样式 :font-family gets messed up while rendering

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。当我执行此操作时，我可以看到 Chrome 会自动在字体系列之间插入一个“”

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

和this.font-family 来自一个看起来像这样的 JSON

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

那为什么在重新加载文件的时候，样式没有正常读回呢？有什么办法可以克服这个问题。我读过一些与此类似的问题，其中带空格的字体名称需要引号。我的问题是如果浏览器包含引号，那么为什么在重新加载 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"};