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

Question

当字体名称有space.

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

<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"。由于字体名称中的 space ，所以有额外的引号。如果您将 JS 的第一行从 var font_family = 'Arial Black 更改为 var font_family = 'Arial'，font-family 的值将简单地显示为 Arial（不带引号）。

PS - 为了让 "Comic Sans" 出现，我不得不使用 "Comic Sans MS"，臭名昭著的字体的专有名称。

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

How to set a CSS font-family using JQuery when the font name has a space

javascript

jquery

html

css

font-family