jQuery CSS font-family 不使用引号答案

【问题标题】：jQuery CSS font-family not working with quotesjQuery CSS font-family 不使用引号
【发布时间】：2012-08-10 14:11:59
【问题描述】：

我正在使用 2 个字体并希望使用 jQuery 在它们之间切换，事情是我的字体名称是“ArvoBold”，当我使用时：

css('font-family','ArvoBold')

它会更改为名为 ArvoBold（无引号）的不存在字体！我试图让它与：

css("font-family","'ArvoBold'")

但它似乎不起作用。我也尝试过创建一个变量：

var fontvar="'"+"ArvoBold"+"'";
css('font-family',fontvar);

也没有成功，因为在元素的 CSS 上（使用检查 Google Chrome 的检查器）它一直使用 ArvoBold 而不是“ArvoBold”。

谁能帮帮我？

提前致谢！

约翰

【问题讨论】：

为什么你的字体名称中有引号？
如何您的字体名称中有引号？
为什么不更改字体名称？因为我们所有的答案都不起作用。我也不认为这是可能的。
我最终使用了另一种解决方案来更改类来更改字体。我仍然不知道为什么会这样。 Arvobold 是 font-squirrel 提供的字体，我仍然不明白为什么我的引号有这个问题，但现在谁在乎！解决了哈哈

标签： jquery css font-face font-family

【解决方案1】：

不确定您的确切实现，但这可以通过转义字符串中的单引号来实现：

$(".font-face").css("font-family","\'ArvoBold\'");

为什么需要单引号？

在内容 div 中转义单引号输出“ArvoBold”的快速测试：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>   
<style>
#content{border:solid 1px red;width:100px;height:100px;text-align:center;}
</style>
</head>

<body>

<div id="content"></div>

<script type="text/javascript">
$(document).ready(function(){
$("#content").html("\'ArvoBold\'");
});
</script>

</body>
</html>

【讨论】：

他不想把字体改成ArvoBold，而是改成'ArvoBold'。
这就是为什么我问他是否需要单引号
经过测试和调试，我发现您的答案确实有效。非常感谢！

【解决方案2】：

您需要定义选择器并更正您的 css() 括号。

Here is working jsFiddle.

var fontvar = 'ArvoBold';
$('.mySelector').css({'font-family':fontvar});

注意：别忘了也使用$(document).ready()。

【讨论】：

现在用'ArvoBold'代替Arial试试看它是否仍然有效。
我认为你误解了这个问题。

【解决方案3】：

在CSS中，你可以写

font-family: Arial;

还有

font-family: 'Arial';

意思是一样的。因此，预计在

'ArvoBold'

引号被解释为字符串分隔符，而不是字符串的一部分。

您可以尝试转义引号，即

font-family: "\'ArvoBold\'"

不过，我必须重复 BoltClock 的问题：为什么字体名称中有引号？

【讨论】：

他应该更改他的字体名称，您的解决方案也不起作用：jsfiddle.net/Mcwkx/12
@barlasapaydin 嗯，是的，这可能是最简单的解决方案（如果不是唯一的解决方案）。
我知道它应该可以工作，但不知何故它并没有大声笑转义引号确实有效。引号在所有字体松鼠字体名称中都很常见，所以我最终还是使用它们。