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。当我这样做时，我可以看到 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"},...]

那为什么在重新加载文件时，没有正确读回样式？有没有办法我可以克服这个。我已经阅读了一些与此类似的 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"};