当字体名称有空格时，如何使用 JQuery 设置 CSS 字体系列

Question

我正在尝试使用 JQuerycss方法设置font-family属性，并在字体名称有空格时遇到问题。

无论我如何引用或不引用字体名称，元素最终都会像：

<h1 style="font-family: "Comic Sans"">Title Text</h1>

带有嵌套的双引号。

var font_family = 'Arial Black';
var $title_template = $('<h1>Title Text</h1>');
var $title;
console.log(font_family)
$title = $title_template.clone().css({'font-family': font_family});
$('body').append($title)
font_family = "'Arial Black'";
console.log(font_family);
$title = $title_template.clone().css({'font-family': font_family});
$('body').append($title)
font_family = '"Arial Black"';
console.log(font_family);
$title = $title_template.clone().css({'font-family': font_family});
$('body').append($title)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 style="font-family: 'Arial Black'">Title Text</h1>

Answer 1

如果您正在浏览器中的开发人员选项中查看字体，请不要担心它看起来像嵌套不良的引号：<h1 style="font-family: "Arial Black"">Title Text</h1>.这就是浏览器选择呈现该元素的 Style 属性的方式。样式实际上正在应用，并且字体系列正在正确设置。

如果您查看 DOM 元素的属性(例如在 Chrome DevTools 中(，您会发现 font-family 的值为"Arial Black"。由于字体名称中的空格，因此存在额外的引号。如果你把JS的第一行从var font_family = 'Arial Black改为var font_family = 'Arial'，font-family的值将简单地显示为Arial(不带引号(。

PS - 为了让"Comic Sans">

出现，我不得不使用"Comic Sans MS"，这是臭名昭著的字体的正确名称。