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

Question

我正在尝试使用 JQuery css方法设置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”，这是臭名昭著的字体的专有名称。