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

【问题标题】：How to set a CSS font-family using JQuery when the font name has a space当字体名称有空格时如何使用 JQuery 设置 CSS 字体系列
【发布时间】：2018-08-28 04:49:06
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

带空格的字体名称需要用引号引起来。您需要使用：jQuery('body').css({'font-family': '"Comic Sans"', 'font-weight': 500});
我对字体几乎一无所知，但您确定您通常拥有“Comic Sans”字体系列吗？只有当我使用“Comic Sans MS”而不是“Comic Sans”时，它才对我有用。
您的页面中是否包含字体文件？
@CertainPerformance -- 很好。我把它改成了爱丽儿布莱克。现在它似乎工作了。我仍然有点困惑，因为它仍然有嵌套的双引号，但是“有效”。

标签： javascript jquery html css font-family

【解决方案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”，这是臭名昭著字体的正确名称。

【讨论】：

感谢您解决这个问题。碰巧的是，我使用的是谷歌字体，并且我已将链接文本在每一行上分解为一种字体。奇怪的是，名称中没有空格的字体以这种格式加载得很好，但带有空格的字体却没有。所以嵌套的双引号是一个红鲱鱼。将它们全部放在一条线上，一切正常。但现在我确定嵌套的双引号不是问题。