Question

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

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

<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”（臭名昭著的字体的正确名称）。

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

1 个答案: