Как установить семейство шрифтов CSS с помощью JQuery, когда в имени шрифта есть пробел

Question

Я пытаюсь установить свойство font-family с помощью метода JQuery 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», собственное имя печально известного шрифта.